有兩種方法可以將縱向清單轉換成橫向清單。使用內聯(inline)或浮動(float)的列表項目。
這兩種方法都很好,但如果你想連結到具有相同的大小,你必須使用浮動的方法。
內聯清單項目
建立橫向導覽列的方法之一是指定元素,
實例
li{ display:inline; }
display :inline; -預設情況下,25edfb22a4f469ecb59f1190150159c6元素是區塊元素。在這裡,我們刪除換行符之前和之後每個清單項,以顯示一行。
浮動清單項目
在上面的範例中連結有不同的寬度。
對於所有的連結寬度相等,浮動25edfb22a4f469ecb59f1190150159c6元素,並指定為3499910bf9dac5ae3c52d5ede7383485元素的寬度:
實例
li{ float:left; } a{ display:block; width:60px; }
float:left - 使用浮動區塊元素的幻燈片彼此相鄰
display:block - 顯示區塊元素的鏈接,讓整體變為可點擊連結區域(不只是文字),它允許我們指定寬度
width:60px - 區塊元素預設為最大寬度。我們要指定一個60像素的寬度
以上是css怎麼把縱向排列變成橫向的詳細內容。更多資訊請關注PHP中文網其他相關文章!