如何渲染李项目并排

我想要一个项目列表（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

如何渲染李项目并排

回答

相关问题