li 항목을 나란히 렌더링하는 방법

Question

항목 목록 (li 태그)을 나란히두고 싶지만 작동하지 않습니다. 기본적으로 첫 번째 항목은 왼쪽에 떠 있고 다른 항목은 오른쪽에 떠 다니기를 원하지만 모두 같은 수준입니다. 한 그룹의 목록이 왼쪽에 있고 다른 그룹의 목록이 오른쪽에 있지만 제대로 정렬되지 않았지만 오른쪽 그룹은 왼쪽에있는 그룹과 평행하지 않습니다. (1) 리튬에 n 번째 자녀 : nth- 내가 첫 번째 그룹 리를 만들기 위해 넣어하는 방법을 잘 모르겠습니다

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

다음은 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 부분이다 아이 (7)는 왼쪽으로 뜨고 나머지는 오른쪽으로 부순다.

Answer 1

다른 점을 고려해야합니다.

• display:inline은 플로팅 된 요소에는 영향을주지 않지만 (IE6 이중 여백 버그를 수정하는 데 사용될 수 있음).
• "똑똑한"선택기 (예 : :nth-child(-n+6))를 사용하여 첫 번째 6 li 요소를 선택하면 코드를 간소화 할 수 있습니다. 브라우저 창은 모든 요소를 ​​표시하기에 충분히 넓은 될 필요가 있다는 점에 유의 -

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

  DEMO을 :이 선택기는 매우 good range of browser compatibility

이 결합, 당신은 다음처럼 li 요소를 떠 수 있습니다 같은 줄에.

새로운 display: flex 방법을 사용하면 반응이 빠른 방법을 사용해보십시오.

마지막으로 단순히 열을 만들려는 경우 @dippas가 제안한대로 columns: 2 속성을 사용할 수 있습니다. 그러나에 의해 지원의 부채를 알고 있어야합니다.

Answer 2

이것은 도움이 될 수 있습니다. inline` :

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

JSFIDDLE