Question

我试图在使用纯css的第五个li之后打破动态无序列表。没有Js / Jquery。

我附上了一张图片来展示示例。 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;
       }
   }

Answer 1

如果已知li的数量，您可以使用transform向右移动其他人：

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

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

Answer 2

你可以使用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>

Answer 3

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

打破无序列表到两个

3 个答案: