CSS實(shí)現(xiàn)三列一行的列表排版,可以通過(guò)使用CSS的列布局(column-count)屬性來(lái)實(shí)現(xiàn),以下是一個(gè)簡(jiǎn)單的示例代碼:
HTML代碼:
<ul class="three-column-list"> <li>項(xiàng)目1</li> <li>項(xiàng)目2</li> <li>項(xiàng)目3</li> <li>項(xiàng)目4</li> <li>項(xiàng)目5</li> <li>項(xiàng)目6</li> <li>項(xiàng)目7</li> <li>項(xiàng)目8</li> <li>項(xiàng)目9</li> <li>項(xiàng)目10</li> <li>項(xiàng)目11</li> <li>項(xiàng)目12</li> <li>項(xiàng)目13</li> <li>項(xiàng)目14</li> <li>項(xiàng)目15</li> <li>項(xiàng)目16</li> <li>項(xiàng)目17</li> <li>項(xiàng)目18</li> <li>項(xiàng)目19</li> <li>項(xiàng)目20</li> <li>項(xiàng)目21</li> <li>項(xiàng)目22</li> <li>項(xiàng)目23</li> <li>項(xiàng)目24</li> <li>項(xiàng)目25</li> <li>項(xiàng)目26</li> <li>項(xiàng)目27</li> <li>項(xiàng)目28</li> <li>項(xiàng)目29</li> <li>項(xiàng)目30</li> <li>項(xiàng)目31</li> <li>項(xiàng)目32</li> <li>項(xiàng)目33</li> <li>項(xiàng)目34</li> <li>項(xiàng)目35</li> <li>項(xiàng)目36</li> <li>項(xiàng)目37</li> <li>項(xiàng)目38</li> <li>項(xiàng)目39</li> <li>項(xiàng)目40</li> <li>項(xiàng)目41</li> <li>項(xiàng)目42</li> <li>項(xiàng)目43</li> <li>項(xiàng)目44</li> <li>項(xiàng)目45</li> <li>項(xiàng)目46</li> <li>項(xiàng)目47</li> <li>項(xiàng)目48</li> <li>項(xiàng)目49</li> <li>項(xiàng)目50</li> <li>項(xiàng)目51</li> <li>項(xiàng)目52</li> <li>項(xiàng)目53</li> <li>項(xiàng)目54</li> <li>項(xiàng)目55</li> <li>項(xiàng)目56</li> <li>項(xiàng)目57</li> <li>項(xiàng)目58</li> <li>項(xiàng)目59</li> <li>項(xiàng)目60</li> <li>...</ li> </ul>](javascript:void(0))
``` CSS代碼: ``` .three-column-list { column-count: 3; column-gap: 20px; list-style-type: none; padding: 0; margin: 0; } ``` 這個(gè)示例中,我們創(chuàng)建了一個(gè)包含60個(gè)項(xiàng)目的列表,并將其分成三列。column-count
屬性指定了列的數(shù)量,column-gap
屬性則設(shè)置了列之間的間隔,我們還移除了列表的默認(rèn)樣式,包括列表符號(hào)和額外的內(nèi)邊距和外邊距。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。