如何并排渲染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元素。 这些选择器具有很好的浏览器兼容性

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

li {
    float: right;

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

演示 -请记住，浏览器窗口必须足够宽才能在同一行中显示所有元素。

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

最后，如果您只想创建列，则可以考虑使用columns: 2属性，如@dippas所建议。 但是要注意缺乏支持。

Answer 2

这可能对您有帮助。

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

JSFIDDLE