input居中 - html title提示




如何将此跨度对齐到div的右侧? (4)

你可以在不修改html的情况下做到这一点。 http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

我有以下HTML:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

与此CSS:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

如果你检查这个jsFiddle: http://jsfiddle.net/8JwhZ/ : http://jsfiddle.net/8JwhZ/

你可以看到Name&Date被粘在一起。 有没有一种方法可以让日期与右侧对齐? 我试过float: right; 在第二个<span>但是它将样式搞砸了,并且将包含div的日期推出


使用flexbox的解决方案没有justify-content: space-between

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

当我们在第一个<span>上使用flex:1时,它将占用整个剩余空间并将第二个<span>移动到右侧。 小提琴与此解决方案: https://jsfiddle.net/2k1vryn7/https://jsfiddle.net/2k1vryn7/

您可以在https://jsfiddle.net/7wvx2uLp/3/中看到两种柔性箱方法之间的区别flex:1第一个<span> flexbox与justify-content: space-between和flexbox与flex:1


另一种解决方法是使用绝对定位:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

另见小提琴






css