流體內聯列表和行對齊

我有一個用<li>元素構建的流體網格。流體內聯列表和行對齊

如：

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

li 
{ 
    border:solid 1px green; 
    width: 100px; 
    min-height:50px; 
    display: inline; 
    margin: 10px; 
    float: left; 
}

所以這看起來是這樣的：

----------- ----------- ----------- 
|   | |   | |   | 
|   | |   | |   | 
----------- ----------- ----------- 

----------- ----------- ----------- 
|   | |   | |   | 
|   | |   | |   | 
----------- ----------- -----------

萬歲！

問題是當我在其中一個<li>元素中添加內容時，它將拉伸高度。我想這樣的事情結束了：

----------- ----------- ----------- 
| apples | |   | |   | 
| oranges | |   | |   | 
| lemons | ----------- ----------- 
| cherries| 
----------- 

----------- ----------- ----------- 
|   | |   | |   | 
|   | |   | |   | 
----------- ----------- -----------

但其實我有這樣的事情結束了：

----------- ----------- ----------- 
| apples | |   | |   | 
| oranges | |   | |   | 
| lemons | ----------- ----------- 
| cherries| 
----------- ----------- ----------- 
       |   | |   | 
       |   | |   | 
       ----------- ----------- 

----------- 
|   | 
|   | 
-----------

booo！

所以基本上，我試圖保持'行'對齊，當從上述元素推下<li> s之一，而不是推到右側的可用空間。

來源

2010-08-11 fearofawhackplanet

爲什麼你不創建到不同的ul爲每一行，並給他們的CSS？ – Sotiris 2010-08-11 15:43:42

，因爲它是**流體佈局。我不知道每一行都會是寬闊的。 – fearofawhackplanet 2010-08-11 15:47:57

..我正在研究一個jQuery解決方案。我完成後會回覆。 – Hristo 2010-08-11 17:55:07

看看下面的代碼。

顯然IE黑客和MOZ規則應該被移動到條件樣式並有一些填充的問題（閱讀：使用CSS重置）

但除此之外，這應該做的伎倆.. ..

alt text http://img835.imageshack.us/img835/9594/example1281542227415.png

例

<style type="text/css"> 
     ul { 
      background-color:#ddddff; 
      overflow:auto; 
      margin:0; 
      padding:0 0 0 4px; 
      width:296px; 
     } 

     li { 
      background-color:#ddffdd; 
      display:inline-block; 

      /* Trick FF2 into using inline-block */ 
      display:-moz-inline-stack; 

      /* Trick IE6 into using inline-block */ 
      *display: inline; 
      zoom:1; 

      list-style-type:none; 
      margin:0 0 0 -4px; 

      /* Trick IE6 into enforcing min height */ 
      min-height:50px; 
      height:auto !important; 
      height:50px; 

      padding: 0; 
      vertical-align:top; 
      width:100px; 
     } 

    </style> 
</head> 

<body> 

    <ul> 
      <li>apples<br />oranges<br />lemons<br />cherries</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
      <li>5</li> 
      <li>6</li> 
    </ul> 

</body>

來源

2010-08-11 16:29:47 michael

流體內聯列表和行對齊

回答

相關問題