我的jsFiddle在这里:https://jsfiddle.net/r1s6651y/1/
我无法使数字水平对齐的导航。
我已经将display : inline-block
应用于上ul
,但下一个菜单项仍然从第二行开始。
有线索吗?
应堆叠为:
1111111 22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB
不能让li
和width: 100%;
并排排列。当然,它们自然会降到2行而不是1行,毕竟它们是内联元素(可以这样想:<p>
标记在默认情况下也是"内联"的。当<p>
中的文本太长时,文本会"断开"到一行。当它设置为内联时,li
也会断开)。您还希望li
挨着,而不是包含li
的ul
。因此,将display: inline-block;
应用于(正确的)li
元素
ul#myRow li {
width: auto; //could also be set to 50% if it's just 2 li elements
display: inline-block;
}
两件事。如前所述,您希望li
项为display:inline
。您还需要从#myRow
的li
中删除width:100%
。然后,只要容器足够宽,它就会折叠并内联显示(否则它会换行)。
li {
background: #00945f;
border-bottom: 1px solid #016e39;
clear: both;
float: none;
height: 62px;
margin: 0;
padding: 0 30px 30px;
width: 100%;
}
ul {
list-style-type: none;
}
ul#myRow li {
display:inline-block;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<ul id="myRow" class="row">
<li>
<a href="" class="active">11111111</a>
</li>
<li>
<a href="">2222222</a>
</li>
</ul>
<ul class="row">
<li>
<a href="">AAAAAAAAAAAAAAa</a>
</li>
<li>
<a href="">BBBBBBBBBBBBBBB</a>
</li>
</ul>
</section>
伙计,你犯了一些错误。我把它固定在:https://jsfiddle.net/r1s6651y/4/
li {
display: inline-block;
background: #00945f;
border-bottom: 1px solid #016e39;
margin: 0;
padding: 10px 20px;
}
在想要水平的li
上放一个class
,然后添加css display: inline
.horiz {
display: inline;
}
<section>
<ul id="myRow" class="row">
<li class="horiz">
<a href="" class="active">11111111</a>
</li>
<li class="horiz">
<a href="">2222222</a>
</li>
</ul>
<ul class="row">
<li>
<a href="">AAAAAAAAAAAAAAa</a>
</li>
<li>
<a href="">BBBBBBBBBBBBBBB</a>
</li>
</ul>
</section>