使用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？为什么要进行显示：内联将左侧框分成两部分？

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/