我正在尝试做类似于Chrome的菜单,在下拉菜单中我想要水平菜单和垂直一起。
我的代码:
<div id="mobileMenu" >
<ul class="nav">
<li><a href="" data-bypass>1</a></li>
<li><a href="" data-bypass>2</a></li>
<div class="oneLine">
<div class="row-fluid align-center">
<div class="span6">
<li><a href="" data-bypass>3</a></li></div>
<div class="span6">
<li><a href="" data-bypass>4</a></li><div></div>
</div>
</div>
</div>
<li><a href="" data-bypass>5</a></li>
<li><a href="" data-bypass>6</a></li>
<li><a href="" data-bypass>7</a></li>
</ul>
</div>
我想也许我可以创建额外的课程,并通过不同的跨度划分它,用&#34; 3和4&#34;创建一行。水平,但它没有工作。 我只用简单的css尝试了没有跨度:
.oneLine {
li {
display: inline;
a {
float: left;
clear:both;
width:50%;
border-right: 1px solid #969696;}
}
}
它并没有奏效。 也许你知道怎么做吗?
非常感谢!
答案 0 :(得分:0)
这样做有很多可能性。
选中此http://jsfiddle.net/odd1y2nc/1/
<ul>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
</ul>
ul {
list-style: none;
}
ul li {
float: left;
width: 100%;
}
.horizontal {
width: 33%;
}