每页几张图像

Question

我想在导航栏的每一页上放置几张图像。

下面是一个截图，供您参考。

我的问题是我的第二张图片不在“包装”页面上方。

不可能向右进行padding-right。

您认为我的 HTML 是正确的吗？

 header{
      background-color: black;
      height: 120px;
      width: 1200px;
    }
    
    .logo{
      padding: 32px 0 0 22px;
    
    }
    
    nav ul{
      float:right;
      text-align: center;
      margin-right: 40px;
    }
    
    #barre-navigation li{
      font-size: 12px;
      font-family: "Ubuntu","Helvetica Neue",Helvetica,Arial,sans-serif;
      display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
    }
    
    #barre-navigation li a{
      text-decoration: none;
      text-align: center;
      color: white;
      display: inline-block;
      padding-left: 20px;
    }
    
    .img-one{
      float: right;
      padding-right: 555px;
      padding-top: 16px;
    }
    
    
    .img-two{
      float: right;
      padding-top: 16px;
      padding-right: 500px;
    }

 <header>
        <img class="logo" src="images/logo-horizontal-fond-noir-couleur.png" alt="logo" >
        <img class="img-one" src="images/home-icon.png" alt="img" >
        <img class="img-two" src="images/packages-icon.png" alt="img" >
        <nav>
          <ul id="barre-navigation">
            <li><a href="#">Home</li>
            <li><a href="#">Packages</li>
            <li><a href="#">Outils</li>
            <li><a href="#">Projets</li>
            <li><a href="#">Témoignages</li>
            <li><a href="#">Contact</li>
          </ul>
        </nav>
    </header>

Answer 1

我为您制作了一个模板。

.container {
  width:100%;
  height:100px;
  background:#262626;
  position:relative;
}
.flex {
  display:flex;
  width:500px;
  justify-content:space-around;
  float:right;
  heigth:100px;
  align-items:center;
}

.a {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  heigth:100px;
}

.a img {
  margin:10px 0 0 0;
}
.a a {
  color:#fff;
  line-height:50px;
  text-decoration:none;
  font-family:sans-serif;
}

.logo {
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
}

<div class="container">
  <img src="https://picsum.photos/200/70" alt="" class="logo">
<div class="flex">
<div class="a">
  <img src="https://picsum.photos/50/50" alt="">
 <a href="#">Home</a>
</div>
<div class="a">
  <img src="https://picsum.photos/50/50" alt="">
  <a href="#">Home</a>
</div>
<div class="a">
  <img src="https://picsum.photos/50/50" alt="">
  <a href="#">Home</a>
</div>
<div class="a">
  <img src="https://picsum.photos/50/50" alt="">
 <a href="#">Home</a>
</div>
  <div class="a">
  <img src="https://picsum.photos/50/50" alt="">
  <a href="#">Home</a>
</div>
<div class="a">
  <img src="https://picsum.photos/50/50" alt="">
  <a href="#">Home</a>
</div>
  </div>
  </div>
</div>