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方法来使用响应更快的方法。

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

Answer 2

这对你有帮助。

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

JSFIDDLE

如何并排渲染项目

2 个答案: