Question

我必须使用以下HTML代码中的CSS创建两列块：

<nav>
  <a href="http://www.link1.net/">Link 1</a>
  <a href="http://www.link2.org/">Link 2/a>
  <a href="http://www.link3.com/">Link 3</a>
  <a href="http://www.link4.net/">Link 4</a>
  <a href="http://www.link5.net/">Link 5</a>
  <a href="http://www.link6.org/">Link 6</a>
  <a href="http://www.link7.org/">Link 7</a>
  <a href="http://www.link8.org/">Link 8</a>
</nav>

两列必须如下：

Link1 Link2

Link3 LInk4

Link5 Link6

Link7 LInk8

块的固定宽度为300px，背景为color #808080。有人知道怎么做吗？我真的很感激。

Answer 1

＆＃13;

nav {
  width: 600px
}
a {
  float: left;
  width: 300px;
  color: #808080;
}

＆＃13;

<nav>
  <a href="http://www.link1.net/">Link 1</a>
  <a href="http://www.link2.org/">Link 2</a>
  <a href="http://www.link3.com/">Link 3</a>
  <a href="http://www.link4.net/">Link 4</a>
  <a href="http://www.link5.net/">Link 5</a>
  <a href="http://www.link6.org/">Link 6</a>
  <a href="http://www.link7.org/">Link 7</a>
  <a href="http://www.link8.org/">Link 8</a>
</nav>

＆＃13;

Answer 2

使用CSS3和伪选择器nth-child的变体 - 无论宽度如何。

nav a:nth-child(2n) {
    clear:none;
    display:block;
}

nav a:nth-child(2n+1) {
    float:left;
}

JSFiddle

如何使用CSS显示两列块

2 个答案: