div 元素不尊重内联列表的填充
我正在使用内联列表，并且我注意到下一行的 div 不会尊重其填充（即它是通过 li 元素的边框绘制的）。我能做些什么吗？
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
list-style-type: none;
padding: 10px;
border: 1px solid gray;
}
div {
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
<div>
Hello, World!
</div>
</body>
</html>
I'm using an inline list, and I noticed that that the div on the next line won't respect its padding (i.e. it is drawn right through the li elements' border). Is there anything I can do about that?
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
list-style-type: none;
padding: 10px;
border: 1px solid gray;
}
div {
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
<div>
Hello, World!
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
内联元素不受顶部和底部填充的影响（请参阅原因）。
相反，您可以将它们设为
inline-block：Inline elements are not affected by top and bottom padding (see why).
Instead you can make them
inline-block:对于
li，指定display: inline-block;而不仅仅是inlineFor the
li, specifydisplay: inline-block;instead of justinline