ul의 여백을 제거하려면 어떻게합니까?

나는 수많은 목록이있는 순서가없는 목록이 있습니다. 그러나 나는 리 사이의 마진을 제거하는 것처럼 보이지 않습니다. 여기ul의 여백을 제거하려면 어떻게합니까?

나는 그것을 같이하고 싶은 내용은 다음과 같습니다

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

그냥 플로트 : 왼쪽; – Sarbaz

.unstyled에 font-size: 0; 다음 (예 : 16px) font-size를 추가하려면 추가 연구에 li에

JSFiddle - DEMO

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

OR :이 같은 인라인 블록 요소 사이의 공백을 가져 가십시오 - :

DEMO

추가 정보 추가를 float: left;li에

Fighting the Space Between Inline Block Elements - 크리스 Coyier가

출처

2014-10-11 11:08:08 Anonymous

에 한번 예를 근무 리 항목 (.items_board > .item) 에서 float:left;하지 display:inline-block;를 사용하는 방법에 의해 여기 http://jsfiddle.net/csdtesting/r7v5pfzx/

출처

2014-10-11 11:12:25

ul의 여백을 제거하려면 어떻게합니까?

답변

관련 문제