如何在ul中刪除li的邊距？

我有一堆李的無序列表。但我似乎無法消除李氏之間的利潤空間。如何在ul中刪除li的邊距？

這是我想它是什麼樣子：

enter image description here

這是它看起來像現在：

enter image description here

我可以嘗試下呢？

的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; 
}

來源

2014-10-11 narzero

看http://designshack.net/articles/css/whats-the -deal-with-display-inline-block/ – loveNoHate 2014-10-11 11:05:33

只是給你一個'float：left;'給你... – Sarbaz 2014-10-11 11:27:38

添加font-size: 0;到.unstyled然後添加font-size（例如16像素），以li至r EMOVE這樣inline-block的元素之間的空白：

的jsfiddle - DEMO

.unstyled { 
    font-size: 0; 
    margin-left: 0; 
    list-style: none; 
    /* border:1px solid #e5edec; */ 
} 
li { 
    line-height: 20px; 
    font-size: 16px; 
}

OR：添加float: left;到li - DEMO

更多信息：

Fighting the Space Between Inline Block Elements - 克里斯Coyier

來源

2014-10-11 11:08:08 Anonymous

嘗試使用float:left;而不是display:inline-block;在李項（.items_board > .item）工作示例這裏http://jsfiddle.net/csdtesting/r7v5pfzx/

來源

2014-10-11 11:12:25

如何在ul中刪除li的邊距？

回答

相關問題