如何並排渲染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