将每个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;。但它需要更多空间并超越导航栏。

任何帮助？

Answer 1

您可以使用display: table方法加上使用此方法的方法是，如果您删除某些链接，它会自动占用剩余空间，任何其他解决方案都将使用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>