使列表项彼此相邻

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-block for itemes instead of float: left

我想继续使用嵌套的uls并显示:inline-block for itemes而不是float:left

SAMPLE 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:

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 ......等等......

4 个解决方案

#1

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/

#2

I achieved what I was looking for using display: table-cell to the li's and reducing ul's width.

我实现了我正在寻找的使用display:table-cell to li's和reduce ul的宽度。

See demo

#3

You could style the lists that are being pushed over of margin-left: -20px; here is a working fiddle

您可以设置正在推送边距左侧的列表的样式:-20px;这是一个工作小提琴

http://jsfiddle.net/n8gFT/1/

Of course the amount it is pushed over can be edited by changing the margin-left

当然,可以通过更改margin-left来编辑推过的数量

#4

Add a class to the sub lists and style them like this:

将类添加到子列表并将它们设置为如下样式:

.sub { position: absolute; margin-left: -27px; }

#1