Html &引用；“响应性”；横向列出项目？

我目前正在处理我的网站，导航栏有一些问题。我想把第一个列表项放在左边，其他的都放在右边。（见附图）

---

但这绝对是错误的选择。有谁能提供一个更智能、更现代的解决方案，它工作灵敏/流畅？谢谢。

你不是那样做的。您创建一个包装器div并将overflow设置为hidden，然后在其中放置一个向左浮动的

，以及向右浮动的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>

---

希望这有帮助：）

我不认为仅使用1个列表就可以做到这一点。什么是更好的解决方案？我的方法是使用reactJS并在shadowDOM中创建菜单。通过这种方式，您可以在页面加载时执行一些逻辑，以获取URL，并根据哪个URL将适当的项从菜单数组移动到它自己的浮动范围中，你可以用HTML/css来做，但这可能会让人厌烦，这取决于你有多少页面。这也意味着，如果你需要更改菜单，你只需要在javscript文件中更改菜单栏一次，而不是遍历所有HTML文件并在每个文件中更改它。谢谢。这看起来很棒，将测试它！

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

<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>

.wrapper {
  overflow: hidden;
}

 .logo {
   float: left;
 }

 .main-nav {
   float: right;
 }

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