html - 如何在 1 个 div 中水平设置 3 个无序列表的样式

Question

如何水平并排显示 3 个无序列表？ 3 个 ul 包裹在 1 个名为“tax”的 div 中。

我试过以下方法，但显示不正确。 我知道我可以通过用 div 包装每个 ul 来解决这个问题，但我不想在不必要时使用额外的标记。

示例: http://jsfiddle.net/Eric87/LKp69/13/

HTML

<div id="tax">
<hr>
<h2>
Recent News </h2>
<ul id="recent-news">
    <li>
    <a href='#'>
    new release </a>
    &#32;&rsaquo; </li>
    <li>
    <a href='#'>
    testing titel </a>
    &#32;&rsaquo; </li>
</ul>
<h2>
Categories </h2>
<ul id="categories">
    <li>
    <a href="#">
    Audio </a>
    &#32;&rsaquo; </li>
    <li>
    <a href="#">
    Uncategorized </a>
    &#32;&rsaquo; </li>
</ul>
<h2>
Archives </h2>
<ul id="archives">
    <li>
    <a href=''>
    August 2013 </a>
    &nbsp; </li>
    <li>
    <a href='#'>
    July 2013 </a>
    &nbsp; </li>
    <li>
    <a href='#'>
    May 2013 </a>
    &nbsp; </li>
    <li>
    <a href='#'>
    December 2012 </a>
    &nbsp; </li>
</ul>

CSS

 #tax {
margin-top:100px;
}

#tax ul {
width:33%;
list-style:outside;
}

#categories,#archives,#recent-news {
display:inline-block;
float:left;
}

Answer 1

为每个元素创建一个包装器，并为每个元素分配一个名为“pull-left”的类。然后，在下面添加样式:

<div class="pull-left">
    <h2>Title</h2>
    <ul>
        <li>...</li>
    </ul>
</div>  
<div class="pull-left">
    <h2>Title</h2>
    <ul>
        <li>...</li>
    </ul>
</div> 
<div class="pull-left">
    <h2>Title</h2>
    <ul>
        <li>...</li>
    </ul>
</div> 

这是您的 pull-left 类的 css 代码:

.pull-left { float: left; }