Question

我正在慢慢掌握Flex但是让我感到困惑的是如何让ul.list中的所有li元素浮动。我已经读过，为了让项目浮动，您只需使用margin-left: auto，但这似乎只能在最后一项上正常工作，因为当我将视点调整到1920px以上或者之间的差距时电子邮件和电话号码增加...而顶部菜单的左侧但每个li元素之间保持相同的距离。

这是我的HTML：

<header class="ProMenu">
  <nav class="row align-middle expanded">
    <div class="small-12 medium-4 columns Links">
      <ul class="menu">
        <li><a href="#" title="">Link 1</a></li>
        <li><a href="#" title="">Link 2</a></li>
        <li><a href="#" title="">Link 3</a></li>
      </ul>
    </div>
    <div class="medium-4 columns Logo">
      <a href="" title=""><img src="https://placehold.it/64x42" alt=""></a>
    </div>
    <div class="medium-4 columns Contact">
      <ul class="menu">
        <li><a href="tel:" title="">Phone: 0777123456</a></li>
        <li><a href="mailto:" title="">Email: jog@blogs.com</a></li>
      </ul>
    </div> 
  </nav>
</header>

和我的CSS：

.ProMenu {
    background: #0071c5;
    width: 100%;
}
.ProMenu .row {
    min-height: 60px;
    max-width: 100%;
}
.ProMenu ul li a {
    color: #FFF;
}
.ProMenu .Logo {
    text-align: center;
}
.Contact ul li{
    margin-left: auto;
}

的jsfiddle：

为了让事情变得更轻松，我已将代码上传到online JSfiddle，复制使窗口变大，并监控手机号码和电子邮件之间的距离增加...我想要的东西停止。

Flex CSS - 列表项上的margin-left不仅仅是last-child

0 个答案: