Question

我需要并排放置三个不同的列表：无序列表，有序列表和描述列表我尝试了很多不同的东西，但到目前为止没有浮动内联或内联块正在工作，除非我做错了，有人想解释使用这些的正确方法。我试过的方式是

       #schedule {
} 
#schedule ul {
    list-style-type: none; 
    display: inline-block;
}
#schedule ol {
    list-style-type: none; 
    display: inline-block;
}
#schedule dl {
    list-style-type: none; 
    display: inline-block;
}

作为

的CSS

    <aside id="schedule">
            <h2>Favourite Teachers</h2>
            <ul>
                <li>Steve Sutherland</li>
                <li>Steve Sutherland</li>
                <li>Steve Sutherland</li>
            </ul>
            <h2>Favourite Classes</h2>
            <ol>
                <li>Web Programming</li>
                <li>Tim's</li>
                <li>The Den</li>
            </ol>
            <h2>Favourite lessons</h2>
            <dl>
                <dt>First Webpage</dt>
                    <dd>Got me hooked</dd>
                <dt>Images and videos</dt>
                    <dd>Endless joke possibilites</dd>
            </dl>
    </aside>

Answer 1

将它们包裹在div和float div中。

<div class="first">
<ul>...</ul>
</div>

<div class="second">
<ol>...</ol>
</div>

<div class="third">
<dl>...</dl>
</div>

在CSS中：

.first, .second, .third{
    float: left;
    margin-right: 50px;
}

小提琴：http://jsfiddle.net/cmmabu8n/

并排不同的列表html5

1 个答案: