13

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

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

我想用 CSS 样式设置来实现同样的效果。是否可以？

CSS-only 我的意思是，我们有 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 { ??? }

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

4

4 回答 4

18

将锚标记显示为块元素。

#menu a {
display: block;
}
于 2013-02-13T12:17:04.757 回答
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>
于 2013-02-13T12:17:42.013 回答
1

将显示块设置为

#menu a {
    display: block;
}
于 2013-02-13T12:20:24.793 回答
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) */
}
于 2013-02-13T12:22:37.577 回答