如何并排渲染 li 项目

Question

我正在尝试并排列出项目（li 标签），但它不起作用。基本上我希望前 7 个项目浮动在左侧，其余项目浮动在右侧，但都处于同一水平。虽然一组列表在左侧，另一组列表在右侧，但它们没有正确对齐，右侧组与左侧不平行。这是html代码

<ul class="sidenav nav navbar-nav">
          <li class="list-title active" data-group="Article"><a href="#api-Article">Article</a></li>
        <li data-version="1.0.0" data-name="GetArticlesId" data-group="Article" class="">
          <a href="#api-Article-GetArticlesId">Get an article's basic content</a>
        </li>
        <li data-version="1.0.0" data-name="GetArticleDocumentsId" data-group="Article" class="">
          <a href="#api-Article-GetArticleDocumentsId">Get an article's documents</a>
        </li>
        <li data-version="1.0.0" data-name="GetArticleLinksId" data-group="Article" class="">
          <a href="#api-Article-GetArticleLinksId">Get an article's links</a>
        </li>
        <li data-version="1.0.0" data-name="GetArticlePhotosId" data-group="Article" class="">
          <a href="#api-Article-GetArticlePhotosId">Get an article's photos</a>
        </li>
        <li data-version="1.0.0" data-name="GetArticleVideosId" data-group="Article" class="">
          <a href="#api-Article-GetArticleVideosId">Get an article's videos</a>
        </li>
          <li class="list-title" data-group="Articles"><a href="#api-Articles">Articles</a></li>
        <li data-version="1.0.0" data-name="GetArticleKeywordsKeyword" data-group="Articles" class="">
          <a href="#api-Articles-GetArticleKeywordsKeyword">Get articles by keyword</a>
        </li>
        <li data-version="1.0.0" data-name="GetNewsId" data-group="Articles" class="">
          <a href="#api-Articles-GetNewsId">Get articles by organization</a>
        </li>
        <li data-version="1.0.0" data-name="GetHeadlines" data-group="Articles" class="">
          <a href="#api-Articles-GetHeadlines">Get articles from the announcment section</a>
        </li>
        <li data-version="1.0.0" data-name="GetLeads" data-group="Articles" class="">
          <a href="#api-Articles-GetLeads">Get articles from the featured news section</a>
        </li>
  </ul>

这里是css部分：

#sidenav {
  #scrollingNav {
   background-color: #F9FAFA;
   height: 100%;
   ul.sidenav {
    @include breakpoints(mobile nav tablet lg_tablet) {
      li:nth-child(1) {
        float: left;
        display: inline;
      }
       li:nth-child(2) {
        float: left;
        display: inline;
      }
       li:nth-child(3) {
        float: left;
        display: inline;
      }
       li:nth-child(4) {
        float: left;
        display: inline;
      }
       li:nth-child(5) {
        float: left;
        display: inline;
      }
      li:nth-child(6) {
        float: left;
        display: inline;
      }
       li:nth-child(7) {
        float: right;
        display: inline;
      }
       li:nth-child(8) {
        float: right;
        display: inline;
      }
       li:nth-child(9) {
        float: right;
        display: inline;
      }
       li:nth-child(10) {
        float: right;
        display: inline;
      }
       li:nth-child(11) {
        float: right;
        display: inline;
      }
    }.......

我不知道如何让第一组 li:nth-child(1) 到 li:nth-child(7) 浮动在左侧，其余的浮动在右侧。

Answer 1

您应该考虑不同的事情。

• display:inline 对浮动元素没有影响（但可用于修复 IE6 双边距错误）。
• 您可以使用“更智能”的选择器来简化代码，例如:nth-child(-n+6) 选择前6 个li 元素。这些选择器有一个相当 good range of browser compatibility

结合这一点，您可以像这样浮动您的 li 元素：

li {
    float: right;

    // float elements 1-7, while 0 is the first child
    &:nth-child(-n+6) {
           float: left;
    }
}

DEMO - 请记住，浏览器窗口需要足够宽以在同一行中显示所有元素。

也许您应该考虑使用响应更快的方法，使用更新的display: flex 方法。

最后，如果您只是想创建列，可以考虑使用@dippas 建议的columns: 2 属性。但请注意 .

的支持。

Answer 2

这可能对你有帮助。

li{
   line-height:1.5em;
   border-bottom:1px solid #ccc;
   float:left;
   display:inline;
}

JSFIDDLE