将每个 html 元素放在单独的行中

Question

我想要下图这样的结果。

这是我的 html 代码。

    .main-menu {
      width: 100%;
      height: 60px;
      background: #00436e;
    }
    .main-menu nav a {
      font-weight: 400;
      text-decoration: none;
      margin: 0 0 0 60px;
      color: #fff;
    }
    .main-menu nav a img {
      clear: both;
    }
    .arrow-icon {
      clear: both;
    }

<div class="main-menu">
  <nav class="container-wrapper">
    <a href="#">
      <img src="images/icons/home.png" alt="home">Home
      <img src="images/icons/arrow-down.png" alt="more" class="arrow-icon">
    </a>
    <a href="#">
      <img src="images/icons/transport.png" alt="home">Foreign Policy
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/microphone.png" alt="home">Media
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/passport.png" alt="home">Consular
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/target.png" alt="home">Missions
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/plus.png" alt="home">More</a>
  </nav>
</div>

我尝试使用 clear: both;。但是它需要更多 space 并且超出了导航栏。

有帮助吗？

Answer 1

您可以使用 display: table 方法加上使用此方法的要点是，如果您删除一些链接，它将自动占用剩余的 space，任何其他解决方案将使用 float: left 或 display: inline-block;

.main-menu{text-align:center;}
.container-wrapper{display:table; table-layout: fixed; width: 100%;}
.container-wrapper a{display:table-cell; table-layout: fixed; background: #000; color: #fff; border-left: 1px solid #fff;}
img{display: block; margin: 0 auto;}

<div class="main-menu">
              <nav class="container-wrapper">
                <a href="#"><img src="images/icons/home.png" alt="home">Home<img src="images/icons/arrow-down.png" alt="more" class = "arrow-icon"></a>
                <a href="#"><img src="images/icons/transport.png" alt="home">Foreign Policy<img src="images/icons/arrow-down.png" alt="more"></a>
                <a href="#"><img src="images/icons/microphone.png" alt="home">Media<img src="images/icons/arrow-down.png" alt="more"></a>
                <a href="#"><img src="images/icons/passport.png" alt="home">Consular<img src="images/icons/arrow-down.png" alt="more"></a>
                <a href="#"><img src="images/icons/target.png" alt="home">Missions<img src="images/icons/arrow-down.png" alt="more"></a>
              </nav>
            </div>

Answer 2

如果将 <a> 变成 inline-block 个元素，它可以容纳 float 或 block 个元素：

.main-menu {
  width: 100%;
  height: 60px;
  background: #00436e;
}
.main-menu nav a {
  font-weight: 400;
  text-decoration: none;
  margin: 0 0 0 60px;
  color: #fff;
  display:inline-block;
  text-align:center;
}
.main-menu nav a img {
  display:block;
  margin:auo;
}

<div class="main-menu">
  <nav class="container-wrapper">
    <a href="#">
      <img src="images/icons/home.png" alt="home">Home
      <img src="images/icons/arrow-down.png" alt="more" class="arrow-icon">
    </a>
    <a href="#">
      <img src="images/icons/transport.png" alt="home">Foreign Policy
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/microphone.png" alt="home">Media
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/passport.png" alt="home">Consular
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/target.png" alt="home">Missions
      <img src="images/icons/arrow-down.png" alt="more">
    </a>
    <a href="#">
      <img src="images/icons/plus.png" alt="home">More</a>
  </nav>
</div>

将每个 html 元素放在单独的行中

Placing each html elements in a separate row

html

css

navbar