CODEWITHSUNDEEP
csshtmlnavbar
ONE_FE
ONE_FE

Reputation: 996

Placing each html elements in a separate row

I want the result as in following picture. enter image description here

Here is my html code.

    .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>

I tried to use clear: both;. But it takes more space and goes beyond the navigation bar.

Any Help?

Upvotes: 0

Views: 613

Answers (2)

Adnan Akram
Adnan Akram

Reputation: 641

you can use display: table method plus point of using this method is if you remove some links it will automatically take remaining space, any other solution will be using float: left or 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>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105873

If you turn <a> into inline-block elements, it can hold float or block elements :

.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>

Upvotes: 1

Related Questions