html - 有没有办法在 div 之间设置“换行符”？

Question

所以我有一个菜单，4 个菜单点，我想把它们放在一个 2x2 的正方形中。有没有办法做到这一点，而无需为前两个课程和其他课程课程？

谢谢你的帮助 ：）

更新：我确实搞砸了一点，我正在使用弹性盒子结构，很抱歉没有发布这些信息：

  ul {
  -webkit-box-orient: horizontal;
  }

  ul li {
    -webkit-box-flex: 1;
    height: 44%;
    margin: 3%;
  }

Answer 1

当然。一方面，您可以使用浮动并相应地设置宽度。请参阅下面的示例，或http://jsfiddle.net/BUPX7/以获取实时示例。

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

ul {
    width: 200px;
}

ul li {
    width: 100px;   
    margin: 0;
    padding: 0;   
    float: left;
}

Answer 2

div默认情况下，元素之间有换行符。您显然正在使用一些 CSS 来覆盖它。您需要相应地修改 CSS 代码，或选择不同的方法。

假设“菜单点”是链接，最简单的方法是使用

<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>

但是，如果您正在使用一些详细的标记并希望单独在 CSS 中创建中断，那么您可能需要一些详细的选择器，例如:nth-child(3).