有不少小伙伴在剛學(xué)習(xí) html 的時(shí)候都會遇到這樣一個(gè)問題：html 橫向?qū)Ш綑谠趺醋?？今天W3Cschool小編就為大家分享一下簡單的橫向?qū)Ш綏l代碼，相信會對大家有所幫助。
html 橫向?qū)Ш綑谝话阌脙煞N方法來制作：第一種，我們使用塊狀結(jié)構(gòu)結(jié)合行內(nèi)結(jié)構(gòu)來制作。第二種，我們使用?float?屬性來制作。由于第一種比較常用，一下就以第一種方式來介紹。
首先大家要明確一下塊狀元素與行內(nèi)結(jié)構(gòu)的不同之處：
（1）塊狀結(jié)構(gòu)可以自定義寬、高、邊框、邊距等屬性，而行內(nèi)元素只支持對行高、邊距進(jìn)行自定義，塊狀元素?fù)碛械耐膺吘?、上線邊距、邊框?qū)傩孕袃?nèi)元素都沒有。
（2）塊狀結(jié)構(gòu)不能與其他元素在同一行使用，而行內(nèi)元素支持在其他元素中嵌套使用。
橫向?qū)Ш綏l代碼實(shí)例：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:15px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#e6e6e6;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">W3Cschool</a></li>
<li><a href="#news">入門教程</a></li>
<li><a href="#contact">編程課程</a></li>
<li><a href="#about">編程實(shí)戰(zhàn)</a></li>
</ul>
</body>
</html>
以上就是本文的全部內(nèi)容了，今天和大家分享了 html 橫向?qū)Ш綑谠趺醋?，有興趣的朋友可以使用我們W3Cschool的 html在線編輯器進(jìn)行調(diào)試非常方便！
