如何移除ul中li的边距？
如何移除ul中li的边距？
我有一个无序列表，其中包含一堆li。但是我似乎无法去掉li之间的边距。
这是我想要的效果：
而这是现在的效果：
我可以尝试下一步做什么？
JSFiddle：
http://jsfiddle.net/narzero/76egxmt9/
HTML：
- First
- one
- two
- three
- four
- five
- six
- Second
- one
- two
- three
- four
- five
- six
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;
}
问题：如何删除无序列表（ul）中li元素的边距？
原因：在使用行内块元素时，li元素之间会存在一些空白间隔。
解决方法1：给.unstyled类添加font-size: 0;，然后给li元素添加font-size（例如16px），以删除行内块元素之间的空白间隔。具体代码如下：
.unstyled {
font-size: 0;
margin-left: 0;
list-style: none;
}
li {
line-height: 20px;
font-size: 16px;
}
解决方法2：给li元素添加float: left;，以删除行内块元素之间的空白间隔。
更多信息：Chris Coyier在他的文章《Fighting the Space Between Inline Block Elements》中提供了更多相关信息。
