“响应”水平列出项目？

Question

我目前正在使用我的网站，并且导航栏存在一些问题。我想在左边有第一个列表项，其他一切应该保持在右边。 （见附图）

<li>Some Text</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Etc.</li>

我现在可以尝试一些像

这样的愚蠢CSS

li:first-child:
padding-right:300px;

但这绝对是错误的方式。任何人都可以提供更智能，更现代的解决方案，能够快速响应/流畅吗？感谢。

Answer 1

你不这样做。你创建了一个包装div并将溢出设置为隐藏，然后在其中放置一个浮动到左边的<a>，以及你向右浮动的ul。

<div class="wrapper">
  <a class="logo">logo</a>

  <ul class="main-nav">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>
</div>

而css将是：

.wrapper {
  overflow: hidden;
}

 .logo {
   float: left;
 }

 .main-nav {
   float: right;
 }

 .main-nav li {
   display: inline-block;
 }

希望这有助于：）