Html 如何让 <li> 与块元素并排放置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/196567/
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
How do I make <li> with block elements sit beside each other?
提问by SCdF
I have a mockup layout for something here. Essentially there are sections, columns and fields, which are all written as a combination of <ul>and <li>elements. This is done specifically for later parsing.
我在这里有一个模型布局。本质上有部分、列和字段，它们都写成<ul>和<li>元素的组合。这是专门为以后解析而完成的。
A snippet of the HTML:
一段 HTML 代码：
<li class="layout"><span class="type">[Column] </span>
<ul class="layout-children">
<li class="field"><span class="type">[Text] </span>A field</li>
<li class="field"><span class="type">[Text] </span>Another field</li>
<li class="field"><span class="type">[Text] </span>Yet another field</li>
</ul>
</li>
<li class="layout"><span class="type">[Column] </span>
<ul class="layout-children">
<li class="field"><span class="type">[Text] </span>More fields</li>
<li class="field"><span class="type">[Text] </span>And one more field</li>
</ul>
</li>
If you go to the linked contentyou'll note that those columns sit vertically. I want the columns to sit beside each other, but I am not sure how to go about it.
如果您转到链接的内容，您会注意到这些列是垂直放置的。我希望这些列并排坐在一起，但我不知道如何去做。
It would be preferable if the HTML didn't change, just the CSS.
如果 HTML 不改变，只改变 CSS，那就更好了。
采纳答案by Kris
I just added this to your css:
我刚刚将其添加到您的 css 中：
ul .section-children li.layout {
display : inline-block;
}
Unfortunately, I don't know how well supported inline-block is nowadays.
不幸的是，我不知道现在内联块的支持情况如何。
回答by eyelidlessness
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
回答by Joe Basirico
In your <UL>tag use the css attribute "list-style:none;" and in the <li>tag use the css attribute "display:inline;" you'll have to play around with the padding and margin to make it look good, but those two attributes will get you on your way. For a better example see my Non-Profit website: Technically Learning
在您的<UL>标签中使用 css 属性“list-style:none;” 并在<li>标签中使用 css 属性“display:inline;” 您必须调整填充和边距以使其看起来不错，但这两个属性将使您顺利进行。有关更好的示例，请参阅我的非营利网站：技术学习
回答by Dimitry
How about this:
这个怎么样：
.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }
回答by lock
yeah using display:blockit would be impossible to make them sit beside each other unless if you'd try to specify a width for each of them
but if that's the case just use display:inline
是的，使用display:block它不可能让它们并排坐在一起，除非您尝试为它们中的每一个指定宽度，但如果是这种情况，请使用display:inline
回答by Derek H
Just an alternative to using inline elements since IE has had a history of padding problems with inline:
只是使用内联元素的替代方法，因为 IE 有内联填充问题的历史：
.layout-children:after
{
content: "";
display: block;
height: 0px;
clear: both;
}
.layout-children .field
{
float: left;
}
回答by Herb Caudill
Using inlineor inline-blockis going to be nothing but trouble. It's a much better idea to use floats as @Dmitry Z has suggested (but without the margin hack, which isn't necessary).
使用inlineorinline-block只会带来麻烦。正如@Dmitry Z 所建议的那样，使用浮点数是一个更好的主意（但没有边距黑客，这是不必要的）。
回答by Traingamer
A simple float: left will work (with a minor adjustment for the width)
一个简单的浮点数：left 将起作用（对宽度稍作调整）
li {
margin: .5em 1em;
padding: .1em;
font-family: sans-serif;
list-style-type: none;
border: 1px #666 solid;
float: left;
}
#layout-section {
width: 85%;
}
