使用display来并排显示：inline

我有两个要并排呈现的列表。首先，我单独列出的右侧列表有display:inline属性。列表出来， enter image description here 使用display来并排显示：inline

目标不符合，因为右侧的框显示在左侧框下方。所以，我做了左边的盒子也是display:inline。现在，它看起来全部碎裂状， enter image description here

我的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并排？为什么显示：内联将左框分成两部分？

来源

2015-04-05 Madhavan Kumar

听起来像你要找的'显示：flex'或许'列数：2'？ – thebjorn 2015-04-05 12:08:46

事情是这样的：

<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/）

来源

2015-04-05 12:15:12 thebjorn

这个答案可以解决这个问题.... – 2015-04-05 12:17:51

尽管目前的答案都能解决这个问题，但这个答案有前瞻性，所以我喜欢这个。在实施这个解决方案时要小心浏览器的兼容性，因为它可能需要供应商前缀。 – 2015-04-05 12:24:11

我建议在让它触及用户之前，始终通过autoprefixer（https://github.com/postcss/autoprefixer）传递你的css。 – thebjorn 2015-04-05 12:26:41

尝试使用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/

来源

2015-04-05 12:16:53

使用display来并排显示：inline

回答

相关问题