我有一个无序列表，其中有一堆 li。但我似乎无法删除 li 之间的边距。
这是我希望的样子:
这就是现在的样子:
接下来我可以尝试什么？
JSFiddle:
http://jsfiddle.net/narzero/76egxmt9/
HTML:
<body>
<div class="content_panel active">
<ul class="unstyled items_board">
<li class="item_header">First</li>
<li class="has_details item">one</li>
<li class="has_details item">two</li>
<li class="has_details item">three</li>
<li class="has_details item">four</li>
<li class="has_details item">five</li>
<li class="has_details item">six</li>
<li class="item_header">Second</li>
<li class="has_details item">one</li>
<li class="has_details item">two</li>
<li class="has_details item">three</li>
<li class="has_details item">four</li>
<li class="has_details item">five</li>
<li class="has_details item">six</li>
</ul>
</div>
</body>
CSS:
body {
background: #fcfcfc;
font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}
.content_panel .active {
display: inherit;
}
.unstyled {
margin-left: 0;
list-style: none;
/* border:1px solid #e5edec; */
}
ul {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
margin: 0 0 10px 25px;
list-style: none;
padding-left: 0;
margin-left: 0;
}
li {
line-height: 20px;
}
ul > .unstyled {
margin-left: 0;
list-style: none;
}
.items_board {
padding: 4px;
min-height: 500px;
}
.item_header {
background: transparent;
width: 100%;
margin-right: 0;
padding: 0;
margin-bottom: 20px;
margin-top: 42px;
cursor: auto;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.item_header:first-child {
margin-top: 8px;
}
.items_board .item {
height: 300px;
margin: 0 -1px -1px 0;
display: inline-block;
position: relative;
vertical-align: top;
width: 205px;
background: #fff;
text-align: left;
color: #5a5a5a;
font-weight: 400;
border: 1px solid #e5edec;
}
.has_details {
cursor: pointer;
}
最佳答案
将 font-size: 0; 添加到 .unstyled，然后将 font-size(例如 16px)添加到 li 删除内联 block 元素之间的空白，如下所示:
JSFiddle - DEMO
.unstyled {
font-size: 0;
margin-left: 0;
list-style: none;
/* border:1px solid #e5edec; */
}
li {
line-height: 20px;
font-size: 16px;
}
或: 将 float: left; 添加到 li - DEMO
更多信息:
Fighting the Space Between Inline Block Elements - by Chris Coyier
关于html - 如何删除 ul 中 li 的边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26313939/