Html CSS - 在同一行显示两个文本块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4653229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - display two text blocks on the same line
提问by Alex
How can I position two text blocks on the same line, one to the left and the one to the right, without using floats?
如何在同一行上放置两个文本块，一个在左边，一个在右边，而不使用浮动？
Like this:
像这样：
Bla bla 5
Whatever 25
Boo 12
Each line is a list item - <LI>
每行都是一个列表项 - <LI>
采纳答案by SuperIRis
You could use tables. Also, you could use absolute positioning and setting the same value for top and bottom to each ul object
你可以使用表格。此外，您可以使用绝对定位并将顶部和底部的相同值设置为每个 ul 对象
回答by keithjgrant
You have numbers in your example, which indicates to me that you may be showing tabular data. If that's the case, use a table. Easy!
您的示例中有数字，这向我表明您可能正在显示表格数据。如果是这种情况，请使用表格。简单！
If that's not the case, use spans with a set width:
如果不是这种情况，请使用spans 设置宽度：
.label {
display: inline-block;
width: 200px; // or whatever
}
and:
和：
<ul>
<li>
<span class="label">Blah blah</span>
5
</li>
<li>
<span class="label">Stuff</span>
25
</li>
</ul>
回答by Omer Bokhari
回答by Kenneth Spencer
I know this is an old one, but it would seem like the most semantically correct option here would be to use DL, DT and DT instead of LI.
我知道这是一个旧的，但在语义上最正确的选项似乎是使用 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>
Then you would style it like this:
然后你会像这样设计它：
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;
}
I know you stipulated no floats, but that is the way to get the job done.
我知道你没有规定浮动，但这是完成工作的方式。
回答by Vance
Here is a very simple trick I used. It does use floats, but I think it still looks pretty nice:
这是我使用的一个非常简单的技巧。它确实使用了floats，但我认为它看起来还是很不错的：
HTML:
HTML：
<h1 class="title1">Chicken Craft</h1>
<h1 class="title2">Minecraft Server</h1>
CSS:
CSS：
.title1 {
text-align: left;
color: #269CEB;
margin-top: 0px;
float: left;
clear: both;
}
.title2 {
text-align: left;
color: #FF9D00;
}
