本文為大家分享的兩種橫向?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等。
但有時候，為了使塊狀結(jié)構(gòu)具有行內(nèi)元素的特性，或者使行內(nèi)元素具有塊狀元素的特性，會對兩者進行結(jié)合。舉一個使行內(nèi)元素具有塊狀元素特性的例子：a標簽是最重要的行內(nèi)標簽之一，用戶可以根據(jù)它指定的鏈接訪問相應頁面。為了使a標簽下的元素表現(xiàn)更加美觀，我們想要給這個鏈接設(shè)置一些屬性，包括比如邊框、邊距、背景顏色等等。我們知道這些屬性都是塊狀結(jié)構(gòu)才具有的，所以我們此刻既想繼續(xù)使用a這個行內(nèi)標簽來容納鏈接內(nèi)容，又希望這個行內(nèi)元素也能擁有塊狀結(jié)構(gòu)的相關(guān)屬性。
我們可以通過”a{display:block}“的設(shè)置來解決這一問題。
類似的，當我們想要借助列表，達到設(shè)置橫向?qū)Ш侥康臅r，我們希望列表的每一行能夠在同一行顯示，這時我們也可以通過塊狀結(jié)構(gòu)與行內(nèi)結(jié)構(gòu)的結(jié)合來達到此目的。
我們只需要為list添加一行代碼：list{display:inline;}
方法二 利用float屬性設(shè)置。
屬性float可以設(shè)置兩個方向浮動，包括left和right。設(shè)置橫向?qū)Ш剑褪菍⒘斜頇M置向左浮動，其中向左浮動是因為我們希望設(shè)置浮動后，導航的順序從左到右被橫置，即從左到右依次是導航一到導航四，這更符合更多用戶的習慣。
代碼如下:
XML/HTML Code
1.<!DOCTYPE html>
2.<html>
3.<head lang="en">
4. <meta charset="UTF-8">
5. <title></title>
6. <style type="text/css">
7. ul{
8. float:right;
9. }
10. li{
11. padding-right:30px;
12. float:left;
13. }
14. a{
15. margin-left:20px;
16. font-size:20px;
17. font-weight:bold;
18. color:white;
19. display:block;
20. border:1px solid black;
21. width:100px;
22. text-decoration:none;
23. text-align:center;
24. background-color:darkseagreen;
25. }
26. a:hover{
27. color:red;
28. }
29. </style>
30.</head>
31.<body>
32.<ul>
33. <li>導航一</li>
34. <li>導航二</li>
35. <li>導航三</li>
36.</ul>
37.
38.<a href="#">百度</a>
39.</body>
40.</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試