因此,我尝試建立一个水平列表以在我正在設計的新網站上使用.我已经尝試了一些已经在網上找到的建議,例如將" float"設置為左等,但是在解決問题時,這些建議都没有奏效。
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="index.php">DJ Profiles</a>
</li>
</ul>
当前我不確定匯致此問题的原因,我该如何解決该問题?
最新回復
- 5月前1 #
- 5月前2 #
這个小提琴顯示了如何
http://jsfiddle.net/9th7X/
ul, li { display:inline }
有關列表和CSS的出色參考文献:
http://alistapart.com/article/taminglists/
- 5月前3 #
更好的方法是使用
inline-block
,因為您不需要使用clear:both
在列表的末尾。尝試一下:
<ul> <li> <a href="#">some item</a> </li> <li> <a href="#">another item</a> </li> </ul>
CSS:
ul > li{ display:inline-block; }
在這裏查看:http://jsfiddle.net/shahverdy/4N6Ap/
- 5月前4 #
您還可以使用內聯塊来避免浮動元素
<ul> <li> <a href="#">some item</a> </li> <li> <a href="#">another item</a> </li> </ul>
,然後設置為:
li{ /* with fix for IE */ display:inline; display:inline-block; zoom:1; /* additional styles to make it look nice */ }
這樣,您將不需要浮動任何內容,無需使用clearfix。
- 5月前5 #
在這裏您可以找到一个有效的示例,其中包含有關動態調整列表大小的更多建議。
我使用display:inline-block和百分比填充,以便父列表可以動態更改大小:
display:inline-block; padding:10px 1%; width: 30%
再加上两條規則,以删除第一項和最後一項的填充。
ul#menuItems li:first-child{padding-left:0;} ul#menuItems li:last-child{padding-right:0;}
相似問題
- html:為什麼隱藏的溢位会阻止浮動元素逃离其容器?htmlcss2021-01-12 01:28
- html:CSS屬性作為SASS mixin值htmlcsspropertiessassmixins2021-01-10 13:30
- css:两个div,一个固定宽度,另一个固定宽度csshtml2021-01-09 12:54
- html:如何在CSS中使圖像覆盖?htmlcssimagehoveropacity2021-01-09 14:54
- html:从FF的選擇框中删除轮廓htmlcssfirefoxxhtml2021-01-09 15:59
- jquery:如何建立切換按钮?jqueryhtmlcss2021-01-09 17:26
更新後的答案
我註意到很多人都在使用此答案,因此我決定對其进行一些更新.如果您想查看原始答案,請檢查以下內容.新答案演示了如何在列表中添加一些樣式。