我有一个列表项
<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;
}
答案 0 :(得分:0)
您在ID中缺少n
。
更改html:
id="two-colums"
加入id="two-columns
答案 1 :(得分:0)
这是制作2列的更好方法:
.flexMain {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
ul {
max-width: 50%;
}
&#13;
<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 & comb dented coil fin</li>
<li>33 Check CHW pipe leakage with visual test</li>
</ul>
</main>
&#13;
使用flexbox。我做了2 ul
以使其更容易。
答案 2 :(得分:0)
您也可以使用CSS列
#two-columns {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}