如何渲染李項目並排

我想要一個項目列表（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; 
     } 
    }.......

我不知道如何把讓第一組裏：第n個孩子（1）李：nth-孩子（7）漂浮在左邊，其餘的漂浮在右邊。

來源

2016-08-30 user1518071

你不應該使用'float'和'顯示：inline'。浮動項目隱式顯示爲「塊」，因此存在衝突。一個或另一個，不是兩個。 – MrWhite

您是否在使用像SASS這樣的CSS預處理器？這不是有效的CSS。 – 4castle

使用'：nth-child（-n + 6）'選擇兒童0-6，和'：nth-child（n + 7）'選擇7+ – 4castle

你應該考慮不同的事情。

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方法。

最後，如果您只是想創建列，則可以考慮使用columns: 2屬性，如@dippas所示。但是請注意由...支持。

來源

2016-08-30 22:06:30

+1尼斯答案:)只是一個快速（很迂腐）點 - 你的CodePen仍然顯示「li」的子彈，並且它們互相重疊。將'list-style-type：none'設置爲好建議嗎？ –

@GeoffJames當然是一個很好的建議。但是，儘管需要在元素之間增加一些間距或者尋找更具可擴展性的解決方案，但我認爲我可能會將選擇器作爲一項基本變更。 –

@MarianRick謝謝你的智能選擇器部分，但我試過你的建議（刪除顯示：內聯）我仍然得到山姆問題。我編輯了我的問題，包括我所看到的截圖。 – user1518071

這可能對您有所幫助。

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

JSFIDDLE

來源

2016-08-30 22:14:38 Luis

如何渲染李項目並排

回答

相關問題