使用第n个子列创建2列时出错

Question

我有一个列表项

<ul id="two-colums">
   <li>01 Clean filter</li>
   <li>02 Change filter</li>
   <li>03 Change blower</li>
   <li>04 Wash blower</li>
   <li>05 Change fan belting</li>
   ...
   <li>32 Check & comb dented coil fin</li>
   <li>33 Check CHW pipe leakage with visual test</li>
</ul>

和我的自定义css

#two-columns li {
   width: 50%;
}
#two-columns li:nth-child(n+13) {
   float: right;
}

这是我的错误

​

Answer 1

id中缺少n。

更改html：

进入id="two-columns的id="two-colums"

Answer 2

这里有一个更好的方法来制作两列：

​

.flexMain {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
ul {
  max-width: 50%;
}

<main class="flexMain">
  <ul id="column1">
    <li>01 Clean filter</li>
    <li>02 Change filter</li>
    <li>03 Change blower</li>
    <li>04 Wash blower</li>
    <li>05 Change fan belting</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
  </ul>
  <ul id="column2">
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32 Check &amp; comb dented coil fin</li>
    <li>33 Check CHW pipe leakage with visual test</li>
  </ul>
</main>

​

使用flexbox。我做了2个ul来让它更简单。

Answer 3

您还可以使用CSS列

#two-columns {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

http://codepen.io/anon/pen/eprQMb