css - 使用 HTML5 和 CSS 创建 5 个相等且 flex 的列，可在单行中调整高度

我是 CSS 的初学者，希望在我们的 Jive 平台上从头开始制作一个 HTML block ，它是一行 5 个按钮。每个按钮将包含一个图标和文本，整个按钮是一个链接。我希望 block 跨越它所在的 div 的 100%，并且按钮根据页面宽度调整高度和宽度，以便所有 5 个按钮始终位于同一行，直到屏幕宽度降至 600px 以下并且每个按钮将每人填一行。

到目前为止我有:

#newsnav-container {
  display: block;
  width: 100%;
  height: 100px;
  margin: 0 auto;
  background-color: beige;
}
#newsnav-container a {
  overflow: hidden;
  /*display:inline-block;
    	height:100%;
    	width:23%;
    	margin:0 2% 0 0;*/
  background-color: #96C;
}
#newsnav-container a > div {
  padding: 15px;
  margin: 0 5px 0 0;
  background-color: #96C;
  float: left;
  width: 18.16%;
}
@media screen and (max-width: 600px) {
  #newsnav-container a > div {
    float: left;
    width: 100%;
    margin: 0 0 5px 0;
  }
}

<html>

<head>
  < <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
  <div id="newsnav-container">
    <a class="link-button2" target="_parent" href="link1">
      <div><i class="fa fa-home" aria-hidden="true"></i><span>1</span>
      </div>
    </a>

    <a class="link-button2" target="_parent" href="link2">
      <div><i class="fa fa-bookmark" aria-hidden="true"></i><span>2</span>
      </div>
    </a>

    <a class="link-button2" target="_parent" href="link3">
      <div><i class="fa fa-briefcase" aria-hidden="true"></i><span>3</span>
      </div>
    </a>

    <a class="link-button2" target="_parent" href="link4">
      <div><i class="fa fa-commenting" aria-hidden="true"></i><span>4</span>
      </div>
    </a>

    <a class="link-button2" target="_parent" href="link5">
      <div><i class="fa fa-tachometer" aria-hidden="true"></i><span>5</span>
      </div>
    </a>
  </div>
</body>

</html>

我目前遇到但无法解决的问题是，如果在我的 1920 res 上窗口小于全屏，第 5 个按钮将不会与其他按钮保持一致。

我该如何解决这个问题？

(请原谅我缺乏格式和内容 - 就像我说的我是从头开始构建并使用 block 颜色首先使我的元素响应正确)

最佳答案

方法 #01(首选):

使用 css3 flexbox :

#newsnav-container {
    display: flex;
}
#newsnav-container a {
    width: 19%;
}

#newsnav-container {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  background-color: beige;
  display: flex;
}

#newsnav-container a {
  margin-right: 1%;
  width: 19%;
}
#newsnav-container a > div {
  padding: 15px;
  background-color: #96C;
}

@media screen and (max-width: 600px) {
  #newsnav-container {
    flex-direction: column;
  }
  #newsnav-container a {
    margin: 0 0 5px;
    width: 100%;
  }
}

<div id="newsnav-container">
  <a class="link-button2" target="_parent" href="link1">
    <div><i class="fa fa-home" aria-hidden="true"></i><span>1</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link2">
    <div><i class="fa fa-bookmark" aria-hidden="true"></i><span>2</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link3">
    <div><i class="fa fa-briefcase" aria-hidden="true"></i><span>3</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link4">
    <div><i class="fa fa-commenting" aria-hidden="true"></i><span>4</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link5">
    <div><i class="fa fa-tachometer" aria-hidden="true"></i><span>5</span></div>
  </a>         
</div>

方法#02:

使用 display: table 和 display: table-cell 属性。

#newsnav-container {
    display: table;
    width: 100%;
}
#newsnav-container a {
    display: table-cell;
}

#newsnav-container {
  display: table;
  width: 100%;
  height: 50px;
  margin: 0 auto;
  background-color: beige;
}

#newsnav-container a {
  display: table-cell;
}
#newsnav-container a > div {
  padding: 15px;
  margin:0 5px 0 0;
  background-color:#96C;
}

@media screen and (max-width: 600px) {
  #newsnav-container {
    display: block;
  }
  #newsnav-container a {
    margin-bottom: 5px;
    display: block;
  }
}

<div id="newsnav-container">
  <a class="link-button2" target="_parent" href="link1">
    <div><i class="fa fa-home" aria-hidden="true"></i><span>1</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link2">
    <div><i class="fa fa-bookmark" aria-hidden="true"></i><span>2</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link3">
    <div><i class="fa fa-briefcase" aria-hidden="true"></i><span>3</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link4">
    <div><i class="fa fa-commenting" aria-hidden="true"></i><span>4</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link5">
    <div><i class="fa fa-tachometer" aria-hidden="true"></i><span>5</span></div>
  </a>         
</div>

关于css - 使用 HTML5 和 CSS 创建 5 个相等且 flex 的列，可在单行中调整高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40394605/

css - 使用 HTML5 和 CSS 创建 5 个相等且 flex 的列，可在单行中调整高度

上一篇：html - :active selector of <a> tag without href attribute

下一篇：javascript - 控制 JavaScript .show()/.toggle() 的方向？