如何将这个span对齐到div的右侧？

Question

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

你会发现名称和日期紧贴在一起。有没有办法让日期右对齐？我尝试在第二个上使用float:right;但它会破坏样式，并将日期推出包含的div。

- DaveDev

---

你能修改HTML吗？ - Phrogz

如果您希望某个物体相对于另一个物体浮动，那么浮动的物体需要在非浮动的物体之前。日期应该在标题和右浮动之前。 - Josh Kovach

Answer 1

如果您可以修改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 }

- Phrogz

---

CSS是简化和干净的：两者都应该添加。此外，fiddle包含非常脆弱的解决方案：http://jsfiddle.net/8JwhZ/2090/。 - Risord

或者如果您想要它内联（我做了）<span style="float: right"> - Mark

当窗口/容器太小无法容纳内容时，float会出现换行问题。如果这对您造成了问题，请使用@Risord提供的display:flex解决方案。 - Edward

Answer 2

使用浮点数的时候有些麻烦：

和许多其他“琐碎”的布局技巧一样，可以使用 flexbox 完成。

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

我认为，如果您不必支持旧版浏览器，那么在2017年，这是比使用float更好的解决方案：https://caniuse.com/#feat=flexbox

请查看演示，比较了不同的float用法和flexbox用法（"可能包括一些竞争性答案"）：https://jsfiddle.net/b244s19k/25/。如果您仍需要使用float，当然我建议选择第三个版本。

- Risord

---

这是我选择使用的一个，记得在包含你想要间隔的元素的span中也设置float: left;和float: right;。 - Ran Lottem

这个答案的核心信息是，“浮点数被认为是有害的”，你不应该经常使用它们（当然也有一些罕见的例外）。您能否澄清为什么您认为这是一个好主意？ - Risord

我以为内部元素需要float，因为我认为在fiddle示例中已经为它们定义了，但是对于#testD来说，它没有被定义。我的错！ - Ran Lottem

Answer 3

使用绝对定位是替代浮动的一种解决方案：

.title {
  position: relative;
}

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

另请参见JSFiddle示例。

- Philipp

Answer 4

不使用justify-content: space-between的flexbox解决方案。

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

.title {
  display: flex;
}

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

当我们在第一个上使用flex:1属性时，它会占据剩余空间并将第二个移到右侧。这是使用此解决方案的示例代码：https://jsfiddle.net/2k1vryn7/

在这里https://jsfiddle.net/7wvx2uLp/3/，您可以看到两种 flexbox 方法之间的区别：使用justify-content: space-between和在第一个上使用flex:1属性的 flexbox。

- hydro17

Answer 5

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

- Kerel

Answer 6

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

- Capriatto

---

似乎是一个与问题无关的答案。 - JanBrus