Question

如何在不使用花车的情况下将两个文本块放在同一行上，一个放在左边，一个放在右边？

像这样：

Bla bla                   5
Whatever                 25
Boo                      12

每一行都是一个列表项 - <LI>

Answer 1

您的示例中有数字，这表明您可能正在显示表格数据。如果是这种情况，请使用表格。简单！

如果不是这种情况，请使用设置宽度为span的内容：

.label {
     display: inline-block;
     width: 200px; // or whatever
}

和

<ul>
    <li>
        <span class="label">Blah blah</span>
        5
    </li>
    <li>
        <span class="label">Stuff</span>
        25
    </li>
</ul>

Answer 2

你可以使用表格。此外，您可以使用绝对定位并为每个ul对象的顶部和底部设置相同的值

Answer 3

你可以看到一个有效的例子here

ul {
    list-style-type:none;
}
li span {
    display:inline-block;
    width:100px;
}

<ul>
    <li>
        <span>Bla Bla</span>
        <span>5</span>
    </li>
    <li>
        <span>Whatever</span>
        <span>25</span>
    </li>
</ul>

Answer 4

我知道这是一个旧的，但看起来这里语义最正确的选择是使用DL，DT和DT而不是LI。

<dl>
<dt>Bla bla</dt><dd>5</dd>
<dt>Whatever</dt></dd>25</dd>
<dt>Boo</dt><dl>12</dl>
</dl>

然后你会像这样设计：

dl {
    margin: 0;
}

dt {
    clear: left;
    float: left;
    padding: 0 0 2px;
    font-weight: bold;
}

dd {
    float: left;
    margin-left: 10px;
    padding: 0 0 2px;
}

我知道你没有规定漂浮物，但这是完成工作的方法。

Answer 5

这是我使用的一个非常简单的技巧。它确实使用float s，但我认为它看起来还不错：

HTML：

<h1 class="title1">Chicken Craft</h1>
<h1 class="title2">Minecraft Server</h1>

CSS：

.title1 {
  text-align: left;
  color: #269CEB;
  margin-top: 0px;
  float: left;
  clear: both;
}

.title2 {
  text-align: left;
  color: #FF9D00;
}

CSS - 在同一行显示两个文本块

5 个答案: