如何将此跨度对齐到 div 的右侧？

我有以下 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/

您可以看到名称和日期粘在一起。有没有办法让日期对准右边？我已经在第二个 <span>上尝试了 float: right;，但它搞砸了样式，并将日期推出了附件 div 之外

463199 次浏览
小开
最佳答案

如果可以修改 HTML: http://jsfiddle.net/8JwhZ/3/

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


.title .date { float:right }
.title .name { float:left }
小开

浮点数的另一种解决方案是使用绝对定位:

.title {
position: relative;
}


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

参见 小提琴。

小开

您可以在不修改 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 }
小开

使用花车有点麻烦:

这就像许多其他的“琐碎的”布局技巧可以做的弹性工具箱。

   div.container {
display: flex;
justify-content: space-between;
}

在2017年，我认为这是首选的解决方案(超过浮动) ，如果你不必支持遗留浏览器: https://caniuse.com/#feat=flexbox

检查小提琴如何不同的浮动使用比较，以柔性方块(“可能包括一些竞争的答案”) : https://jsfiddle.net/b244s19k/25/。如果你仍然需要坚持使用 float，我推荐了第三个版本。

小开

采用柔性箱无 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/7wvx2uLp/3/你可以看到两种柔性方法之间的区别: 柔性方法与 justify-content: space-between和柔性方法与 flex:1在第一个 <span>。

小开 
ul { /** works with ol too **/
list-style: none; /** removes bullet points/numbering **/
padding-left: 0px; /** removes actual indentation **/
}

提交答案