Html 使列表项彼此相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17514234/
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
make list items get next to each other
提问by Matías Cánepa
I have a menu with sub menus. I used nested uls to achive this. Now I'm facing this situation: I want all the items and subitems to be displayed horizontally at their respective level. The problem is that when an parent list has a children list, it's width grows so the next item at the same level goes far to the right.
我有一个带有子菜单的菜单。我使用嵌套的 uls 来实现这一点。现在我面临这种情况：我希望所有项目和子项目都在各自的级别水平显示。问题是当父列表有子列表时，它的宽度会增加，因此同一级别的下一项会向右移动很远。
To have things more clear here's a fiddle of what I'm taking about: http://jsfiddle.net/matias/n8gFT/
为了让事情更清楚，这里有一个我正在研究的小提琴：http: //jsfiddle.net/matias/n8gFT/
As you can see I would like to have the items B and C placed where the green dashed spaces are.
如您所见，我希望将项目 B 和 C 放置在绿色虚线空间所在的位置。
Is it possible to do this?
是否有可能做到这一点？
I would like to keep using nested uls and display: inline-blockfor itemes instead of float: left
我想继续使用嵌套的 uls 和display: inline-blockitemes 而不是float: left
SAMPLE HTML:
示例 HTML：
<ul>
<li>ITEM A
<ul>
<li>sub item A1</li>
<li>sub item A2</li>
</ul>
</li>
<li>ITEM B</li>
<li>ITEM C</li>
</ul>
SAMPLE CSS:
示例 CSS：
ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}
EDIT 1: I forgot to tell you this: A, B and C have children. If I click on B, it's children are shown and A's and C's are hidden...and so on....
编辑 1：我忘了告诉你：A、B 和 C 有孩子。如果我点击 B，它的孩子被显示，A 和 C 被隐藏......等等......
回答by tyler
We will start off with a little CSS
我们将从一些 CSS 开始
#menu > li.sub ul {
list-style: none;
position: absolute;
top: -1000em;
left: 0px;
}
#menu li.sub ul li a {
display: inline;
}
#menu > li.sub:hover ul {
top: 3em;
}
#menu{
text-align:left;
}
li{
display:inline-block;
}
Finish with some HTML
完成一些 HTML
<ul id="menu" >
<li class="sub">
ITEM A
<ul>
<li>sub A1</li>
<li>sub A2</li>
</ul>
</li>
<li class="sub">
ITEM B
<ul>
<li>sub B1</li>
<li>sub B2</li>
</ul>
</li>
<li class="sub">
ITEM C
<ul>
<li>sub C1</li>
<li>sub C2</li>
</ul>
</li>
</ul>
and a JSFIDDLE http://jsfiddle.net/ShADm/28/
和一个 JSFIDDLE http://jsfiddle.net/ShADm/28/
回答by Matías Cánepa
回答by Matías Cánepa
You could style the lists that are being pushed over of margin-left: -20px;here is a working fiddle
您可以为of margin-left: -20px;这里推送的列表设置样式是一个工作小提琴
Of course the amount it is pushed over can be edited by changing the margin-left
当然，它被推倒的数量可以通过改变 margin-left
回答by Anton Molenaar
Add a class to the sub lists and style them like this:
将一个类添加到子列表中并像这样设置它们的样式：
.sub { position: absolute; margin-left: -27px; }
