<!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>我的代碼沒錯(cuò)啊。為什么三個(gè)列沒有緊挨著，而是彼此之間有那么大的空隙？空隙該怎么消除呢？除了把“<li>”都寫在一行在外
2 回答
李曉健
TA貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊
你可以用float 來讓他們顯示在一行。
.container?li{margin:0;display:inline;?float:?left}或者給ul和li添加一個(gè)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個(gè)li寫到同一行，不要換行
<li><a?href="#">line?one</a></li><li><a?href="#">line?two</a></li><li><a?href="#">line?three</a></li>
至于原因嘛，你可以去看一下慕課網(wǎng)張鑫旭老師的視頻，哪一講我忘了，他的課程也不多，課講的也比較有意思，你可以去都看一下。有專門說到這個(gè)問題的。
添加回答
舉報(bào)
0/150
提交
取消