Question

嘿我想要我的SubCat4应该列在SubCat1下面，SubCat5应该低于SubCat2我已经尝试了很多东西但是无法得到它..

这是我的HTML代码..

<div class="sub_menu">
<ul>
    <li>SubCat1<span class="icon icon-arrow_down"></span></li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li>SubCat2<span class="icon icon-arrow_down"></span></li>
    <li>By Author</li>
    <li>By Title</li>
</ul>
<ul>
    <li>SubCat3<span class="icon icon-arrow_down"></span></li>
   <li>By City</li>
</ul>
<ul>
     <li>SubCat4<span class="icon icon-arrow_down"></span></li>
     <li>Fiction Books</li>
      <li>Non Fiction Books</li>
</ul>
<ul>
    <li>SubCat5<span class="icon icon-arrow_down"></span></li>
    <li>1</li>
    <li>2</li>
    <li>E-Books Vs. Paper Books</li>
    <li>3</li>
    <li>General Advice on Books</li>
    <li>5</li>
    <li>6</li>
    <li>Ten Best Authors / Poets</li>
    <li>More...</li>
</ul>

您可以在我的jsfiddle链接http://jsfiddle.net/uiupdates/yac70mhw/1/

中获取CSS和代码

请帮忙.. 谢谢你提前。

Answer 1

不要在这里使用浮动，但是内联阻止。

.sub_menu {
    display: block;
    margin: 15px 15px 15px 0px;
    position: absolute;
    width: 844px;
    font-size: 0;
    line-height: 0;
}
 .sub_menu ul {
    border: medium none;
    display: inline-block;
    vertical-align: top;
    margin: 15px;
    width: 251px;
    padding:0;
}

示例： http://jsfiddle.net/yac70mhw/3/

Answer 2

使用clearfix
在第3 <ul>之后插入此内容 <div class="clearfix"></div> 最后在css中 -

.clearfix {
clear: both;
}

使用float left的子类别列表问题

2 个答案: