使用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

回答

相關問題