Html如何設(shè)置橫向?qū)Ш浇Y(jié)構(gòu)

2020-03-24 16:42:29

字體：大中小

供稿：網(wǎng)友

本文為大家分享的兩種橫向?qū)Ш浇Y(jié)構(gòu)的設(shè)置方法，主要借助列表結(jié)構(gòu)。方法一塊狀結(jié)構(gòu)與行內(nèi)結(jié)構(gòu)的結(jié)合。這里首先介紹一下塊狀元素與行內(nèi)結(jié)構(gòu)的區(qū)別。（1）塊狀結(jié)構(gòu)可以設(shè)置行高、寬(width、height)，邊距(margin、padding)、邊框(border)等屬性。行內(nèi)元素只能設(shè)置行高，左右邊距，但不具備外邊距，上下內(nèi)邊距和邊框等屬性。（2）塊狀結(jié)構(gòu)比較霸道，并不與其他元素分享一行。行內(nèi)元素則可以嵌套在其他元素中。常見的塊狀元素有ul,ol,p,form等。常見的行內(nèi)元素有meta,img,span,h1-h6,label等。但有時(shí)候，為了使塊狀結(jié)構(gòu)具有行內(nèi)元素的特性，或者使行內(nèi)元素具有塊狀元素的特性，會(huì)對兩者進(jìn)行結(jié)合。舉一個(gè)使行內(nèi)元素具有塊狀元素特性的例子：a標(biāo)簽是最重要的行內(nèi)標(biāo)簽之一，用戶可以根據(jù)它指定的鏈接訪問相應(yīng)頁面。為了使a標(biāo)簽下的元素表現(xiàn)更加美觀，我們想要給這個(gè)鏈接設(shè)置一些屬性，包括比如邊框、邊距、背景顏色等等。我們知道這些屬性都是塊狀結(jié)構(gòu)才具有的，所以我們此刻既想繼續(xù)使用a這個(gè)行內(nèi)標(biāo)簽來容納鏈接內(nèi)容，又希望這個(gè)行內(nèi)元素也能擁有塊狀結(jié)構(gòu)的相關(guān)屬性。我們可以通過 a{display:block} 的設(shè)置來解決這一問題。類似的，當(dāng)我們想要借助列表，達(dá)到設(shè)置橫向?qū)Ш侥康臅r(shí)，我們希望列表的每一行能夠在同一行顯示，這時(shí)我們也可以通過塊狀結(jié)構(gòu)與行內(nèi)結(jié)構(gòu)的結(jié)合來達(dá)到此目的。我們只需要為list添加一行代碼：list{display:inline;} 方法二利用float屬性設(shè)置。屬性float可以設(shè)置兩個(gè)方向浮動(dòng)，包括left和right。設(shè)置橫向?qū)Ш?，就是將列表橫置向左浮動(dòng)，其中向左浮動(dòng)是因?yàn)槲覀兿ＭO(shè)置浮動(dòng)后，導(dǎo)航的順序從左到右被橫置，即從左到右依次是導(dǎo)航一到導(dǎo)航四，這更符合更多用戶的習(xí)慣。代碼：XML/HTML Code復(fù)制內(nèi)容到剪貼板
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。原文：http://www.cnblogs.com/xiaoqqmin/p/5317551.html html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：如何用HTML5中的canvas繪制漸變矩形

下一篇：HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹