html - 使用显示器 :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标签呢？为什么 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/ )