css把縱向排列變成橫向的方法

發(fā)布時間：2020-04-15 14:04:09 來源：億速云閱讀：985 作者：小新欄目：web開發(fā)

今天小編給大家分享的是css把縱向排列變成橫向的方法，很多人都不太了解，今天小編為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會有所收獲的哦。

css把縱向排列變成橫向的方法

這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。

內(nèi)聯(lián)列表項

建立一個橫向?qū)Ш綑诘姆椒ㄖ皇侵付ㄔ兀?/p>

實例

li{
    display:inline;
}

display:inline; -默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。

浮動列表項

在上面的例子中鏈接有不同的寬度。

對于所有的鏈接寬度相等，浮動 <li>元素，并指定為 <a>元素的寬度：

實例

li{
    float:left;
}
a{
    display:block;
    width:60px;
}

float:left - 使用浮動塊元素的幻燈片彼此相鄰

display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c擊鏈接區(qū)域（不只是文本），它允許我們指定寬度

width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度

關(guān)于css把縱向排列變成橫向的方法就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

向AI問一下細節(jié)

猜你喜歡