使用CSS而不使用中斷元素的垂直佈局？

是否可以實現垂直佈局與只有CSS，而不是HTML元素？使用CSS而不使用中斷元素的垂直佈局？

我有一個div div內的列表。默認情況下，下一個元素是最後一個元素，當右邊沒有地方時，它放在下面。

我想實現與CSS樣式設置相同。可能嗎？

通過CSS-只有我的意思是，我們的div和它的孩子，和不添加任何特殊，如：

斷行元素（<br/>, <div style="clear:both;"/>）
UL標籤
表（是的，仍然使用，fg JSF幾乎完全基於它們）

因此：

<div id="menu"> 
    <a href="something1">Page 1</a> 
    <a href="something2">Page 2</a> 
    <a href="something3">Page 3</a> 
</div>

和CSS實現垂直佈局：

#menu { ??? } 
#menu a { ??? }

有什麼???我可以用來實現我想要的？

來源

2013-02-13 Danubian Sailor

那麼，你想讓你的標籤並排？或頂部 – iConnor 2013-02-13 12:16:47

一個在其他之下，好像有一個
後，每個錨 – 2013-02-13 12:19:15

我已經添加了我的答案 – iConnor 2013-02-13 12:22:52

將錨標記顯示爲塊元素。

#menu a { 
display: block; 
}

來源

2013-02-13 12:17:04 KBN

這是如此簡單，我不相信我不能谷歌搜索使用CSS的垂直定位.. – 2013-02-13 12:25:59

你的意思是這樣的嗎？

http://jsfiddle.net/7Y9jS/

#menu { 
    width: 300px; 
} 

#menu a { 
    display: block; 
    background: #ccc; 
    color: #000; 
    padding: 10px 0; 
    text-align: center; 
    margin-bottom: 2px; 
} 


<div id="menu"> 
    <a href="something1">Page 1</a> 
    <a href="something2">Page 2</a> 
    <a href="something3">Page 3</a> 
</div>

來源

2013-02-13 12:17:42

顯示：塊是關鍵 – 2013-02-13 12:24:53

組顯示塊到

#menu a { 
    display: block; 
}

來源

2013-02-13 12:20:24

使用浮法左

#menu a { 
    float:left; 
}

，然後將類組添加到你的#menu

.group:before, 
.group:after { 
    content: ""; 
    display: table; 
} 
.group:after { 
    clear: both; 
} 
.group { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
}

來源

2013-02-13 12:22:37 iConnor

使用CSS而不使用中斷元素的垂直佈局？

回答

相關問題