Question

是否可以使用仅限CSS 实施垂直布局，而不是使用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 { ??? }

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

Answer 1

将锚标记显示为块元素。

#menu a {
display: block;
}

Answer 2

你的意思是这样吗？

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>

Answer 3

将显示块设置为

#menu a {
    display: block;
}

Answer 4

使用float left

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

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

4 个答案: