how to render li item side by side

Question

I am trying to have a list of items(li tags) side by side, but it is not working. Basically I want the first 7 items to float on the left and the rest of items to float on the right, but all be at the same level. Although one group of list is on the left and the other group of list is on the right but they are not aligned properly, the right group is not parallel to the one on the left. Here is the html code

<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>

Here is the css part:

#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;
      }
    }.......

I am not sure how to put to make the first group li:nth-child(1) to li:nth-child(7) to float on the left and the rest float on the right.

Answer 1

There a different things you should consider.

• display:inline has no effect on floated elements (but may be used to fix the IE6 double-margin bug).
• you can simplify your code by using a "smarter" selector, for example :nth-child(-n+6) to select the first 6 li elements. These selectors have a quite good range of browser compatibility

Combining this, you can float your li elements like so:

li {
    float: right;

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

DEMO - Keep in mind, that the browser window needs to be wide enough to display all elements in the same line.

Maybe you should consider using a more responsive approach, using a newer display: flex method.

Last, if you simply want to create to columns, you could consider the use of the columns: 2 property, as suggested by @dippas. But be aware of the leck of support by .

Answer 2

This could be helpful to you.

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

JSFIDDLE