<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.container{text-align:center;}
.container?ul{list-style:none;margin:0;padding:0;display:inline;}
.container?li{margin:0;display:inline;}
a{magin:0;background-color:red;}
</style>
</head>
<body>
<div?class="container">
????<ul>
???? <li><a?href="#">line?one</a></li>
????????<li><a?href="#">line?two</a></li>
????????<li><a?href="#">line?three</a></li>
????</ul>
</div>
</body>
</html>我的代碼沒錯啊。為什么三個列沒有緊挨著，而是彼此之間有那么大的空隙？空隙該怎么消除呢？除了把“<li>”都寫在一行在外
2 回答
李曉健
TA貢獻1036條經驗 獲得超461個贊
你可以用float 來讓他們顯示在一行。
.container?li{margin:0;display:inline;?float:?left}或者給ul和li添加一個font-size
.container?ul{list-style:none;margin:0;padding:0;display:inline;font-size:?0}
.container?li{margin:0;display:inline;font-size:?16px}或者把3個li寫到同一行，不要換行
<li><a?href="#">line?one</a></li><li><a?href="#">line?two</a></li><li><a?href="#">line?three</a></li>
至于原因嘛，你可以去看一下慕課網張鑫旭老師的視頻，哪一講我忘了，他的課程也不多，課講的也比較有意思，你可以去都看一下。有專門說到這個問題的。
- 2 回答
- 0 關注
- 1381 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消