順序付けられていないリストを2つに分割する

-4

純粋なCSSを使用して、第5番目のliの後に動的な順序付けられていないリストを分割しようとしています。 Js/Jqueryなし。順序付けられていないリストを2つに分割する

例を示す画像が添付されています。 Example Here

HTML

<ul id="year"> 
    <li><a href="#">2016</a></li> 
    <li><a href="#">2015</a></li> 
    <li><a href="#">2014</a></li> 
    <li><a href="#">2013</a></li> 
    <li><a href="#">2012</a></li> 
    <li><a href="#">2011</a></li> 
    <li><a href="#">2010</a></li> 
    <li><a href="#">2009</a></li> 
    <li><a href="#">2008</a></li> 
    <li><a href="#">2007</a></li> 
</ul>

CSS

ul#year { 
    margin-top: 20px; 

    li { 
     margin-bottom: 20px; 
     background-color: blue; 
     width: 50%; 
     float: left; 
     a { 
      @include regular-bold; 
      color: $darkGray; 
     } 
    }

出典

2016-08-10 Vilet Scimeca

あなたの質問がありますか？ – Li357

これはまっすぐに見えるかもしれませんが、1の代わりに2つの 'ul'を使ってみませんか？ –

2列のクラスにulをラップし、このCSSを追加します。

.two-column { 
    @include column-count(2); 
} 

ul#year { 
    li { 
     margin-top: 20px; 
    } 
} 



<div class="two-column"> 
           <ul id="year"> 
            <li><a href="#">2016</a></li> 
            <li><a href="#">2015</a></li> 
            <li><a href="#">2014</a></li> 
            <li><a href="#">2013</a></li> 
            <li><a href="#">2012</a></li> 
            <li><a href="#">2011</a></li> 
            <li><a href="#">2010</a></li> 
            <li><a href="#">2009</a></li> 
            <li><a href="#">2008</a></li> 
            <li><a href="#">2007</a></li> 
           </ul> 
          </div>

出典

2016-08-11 02:59:18 user1355485

李さんの数が分かっている場合は、あなたが右にしてまで他人をシフトするtransformを使用することができます。

ul li:nth-child(n+6){ 
    transform: translateX(70px) translateY(-5.95em) 
}

http://codepen.io/jshawl/pen/vKvkbQ

出典

2016-08-10 23:57:47 jessh

2つのdivを使用してfloatプロパティを使用できます。

<html> 
    <head> 
     <title>Title</title> 

     <style> 
      ul{ 
       padding: 10px; 
       margin: 10px; 
       width: 100px; 
      } 

      #a{ 
       float: left; 
      } 

      #b{ 
       float: right; 
      } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <div id="a"> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
      </div> 

      <div id="b"> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
      </div> 
     </ul> 
    </body> 
</html>

出典

2016-08-11 00:22:37

順序付けられていないリストを2つに分割する

答えて

関連する問題