使用 display:inline 并排显示列表

Question

我有两个要并排呈现的列表。首先，我的右边单单就有display:inline属性。名单出来了，

没有达到目标，因为右侧框呈现在左侧框下方。因此，我将左侧框也设为 display:inline。现在，它看起来都坏了，就像，

我的css密码是

#left, #right {
width: 400px;
display: inline;
padding: 12px 45px;
margin-bottom: 6px;
border-top: 2px solid red;
border-bottom: 1px solid gray;
border-left: thick double #ff0000;
border-right: thick double #ff0000;

}

那么，如何并排显示两个ul tags？为什么 making display:inline 会将左边的框分成两块？

Answer 1

像这样：

<section>
<ul class=left>
    <li>a</li>
    <li>asdf</li>

</ul>
<ul class=right>
    <li>hello</li>
    <li>bye</li>
</ul>
</section>

与 css：

section { display: flex; }
section > ul { flex:1 }

会做 (https://jsfiddle.net/hus50pzp/1/)

Answer 2

尝试使用 display:table-cell

<div>
    <ul>
        <li>ABC</li>
        <li>ABC</li>
        <li>ABC</li>
        <li>ABC</li>
        <li>ABC</li>
    </ul>
    <ul>
        <li>ABC</li>
        <li>ABC</li>
        <li>ABC</li>
        <li>ABC</li>
        <li>ABC</li>
    </ul>
</div>

CSS:

html, body {
    width:100%;
    margin:0;
    padding:0;
}
div {
    display:table;
    width:100%; /*optional*/
    border:1px solid red; /*optional*/
}
div ul {
    display:table-cell;
}

演示：http://jsfiddle.net/GCu2D/661/

使用 display:inline 并排显示列表

Making lists display side by side using display:inline

html

css

html-lists