使用 CSS 垂直布局而不使用破坏元素？答案

【问题标题】：Vertical layout with CSS without using breaking elements?使用 CSS 垂直布局而不使用破坏元素？
【发布时间】：2013-01-28 23:41:43
【问题描述】：

是否可以用 CSS only 而不是 HTML 元素来实现 垂直布局？

我在一个 div 中有一个 div 列表。默认下一个元素是从右到最后的，当右边没有位置时，它放在下面。

我想通过 CSS 样式设置实现相同的效果。有可能吗？

我的意思是纯 CSS，我们有 div 及其子元素，并且不要添加任何特殊内容，例如：

换行元素 (<br/>, <div style="clear:both;"/>)
UL 标签
表格（是的，仍在使用，例如 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 { ??? }

有没有？？？我可以用它来实现我想要的吗？

【问题讨论】：

那么，您希望将标签并排放置吗？或彼此重叠
一个在另一个之下，好像每个锚点后面都有一个
我已经添加了我的答案

标签： html css layout positioning vertical-alignment

【解决方案1】：

使用左浮动

#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) */
}

【讨论】：

【解决方案2】：

将显示块设置为a

#menu a {
    display: block;
}

【讨论】：

【解决方案3】：

你的意思是这样的吗？

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>

【讨论】：

【解决方案4】：

将锚标记显示为块元素。

#menu a {
display: block;
}

【讨论】：

它是如此简单，我不敢相信我不能用谷歌搜索它仅使用 CSS 搜索垂直定位...