Можете ли вы помочь мне сделать так Navbar - PullRequest
Новая
       2

Можете ли вы помочь мне сделать так Navbar

0 голосов
/ 01 мая 2018

enter image description here

привет, можете ли вы помочь мне сделать панель навигации подобной этой панели навигации ... Я уже сделал, но это не хорошо, он работает только с одной шириной, и если я изменю ширину, пусть это просто не будет работать хорошо

Код: 

<nav>
  <ul class="beg-container">
    <!-- beg-->
    <li>
      <!-- insusfful-->
      <ul class="left-container">
        <!-- left-->
        <li class="protectionn" style="width: 276px; border-right: 1px solid lightgray;">
          <a href="#"><img src="images/protection.png" width="20px;">payment protection program</a>
        </li>
        <li style="width: 119px;  border-right: 1px solid lightgray; "><a href="#">how we work</a></li>
        <li class="televesionn" style=" padding-left: 10px">
          <a href="#"><img src="images/televesion.png" width="20px"> watch our latest film</a>
        </li>
      </ul>
    </li>
    <li>
      <!-- insusfful-->
      <ul class="right-container">
        <!-- right -->
        <li><a href="#">post buy requirement</a></li>
        <li style="width: 150px; border-left: 1px solid lightgray;" style="width: 276"><a href="#">dowload app</a></li>
        <li style="width: 50px;  border-left: 1px solid lightgray;"><a href="#">help</a></li>
        <li style="width: 175px;  border-left: 1px solid lightgray;"><a href="#">+9196969696</a></li>
      </ul>
    </li>

  </ul>
</nav>
<!-- end of navbar -->

1 Ответ

0 голосов
/ 01 мая 2018

Вы увидите это лучше на большом экране 

  li,ul{
    display: flex;
}
ul{
   justify-content: space-between; 
}
<nav>
  <ul class="beg-container">
    <!-- beg-->
    <li>
      <!-- insusfful-->
      <ul class="left-container">
        <!-- left-->
        <li class="protectionn" style="width: 276px; border-right: 1px solid lightgray;">
          <a href="#"><img src="images/protection.png" width="20px;">payment protection program</a>
        </li>
        <li style="width: 119px;  border-right: 1px solid lightgray; "><a href="#">how we work</a></li>
        <li class="televesionn" style=" padding-left: 10px">
          <a href="#"><img src="images/televesion.png" width="20px"> watch our latest film</a>
        </li>
      </ul>
    </li>
    <li>
      <!-- insusfful-->
      <ul class="right-container">
        <!-- right -->
        <li><a href="#">post buy requirement</a></li>
        <li style="width: 150px; border-left: 1px solid lightgray;" style="width: 276"><a href="#">dowload app</a></li>
        <li style="width: 50px;  border-left: 1px solid lightgray;"><a href="#">help</a></li>
        <li style="width: 175px;  border-left: 1px solid lightgray;"><a href="#">+9196969696</a></li>
      </ul>
    </li>

  </ul>
</nav>
...