html - 将最后 3 个项目向右移动

Question

我想将最后三个项目向右移动，但我不知道该怎么做。我尝试使用margin-right。

.header-right { 
  float: right;
  padding-right: 20px;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;

}

.txt10 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}


.header-page {
  display: flex;
  flex-flow: row wrap;
  background-color: aqua;
  height: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 150px;

  }
  
.header-left {
  padding-left: 14px;

}
  
.header-right { 
  float: right;
  padding-right: 20px;
}
  
#dropDown-languages {
  width: 75px;
  height: 20px;
  margin-right: 20px;
}

  <div class="header-page text10">
    <div class="header-left"><i class="far fa-calendar"></i>138 running days</div>
    <div class="header-left"><i class="far fa-envelope"></i>[e-mail]</div>
    <select name="dropDown-languages" id="dropDown-languages">
      <option value="english">English</option>
      <option value="french">French</option>
    </select>
    <div class="header-right"><i class="fas fa-angle-right"></i> deposit</div>
    <div class="header-right"><i class="fas fa-angle-right"></i> paidout</div>
  </div>

标签： htmlcss

Answer 1

.header-left:nth-child(2) {margin-right: auto;}将元素一直推到右侧，因为您要告诉边距占用最大的可用空间。

你已经有了.header-page { padding-left: 150px;}。如果您也添加padding-right:150px，您将在标题右侧获得填充，并且自动边距将无法将内容一直推到边缘。