Как удалить поля для li в ul?

У меня есть неупорядоченный список с кучей ли. Но я не могу удалить поля между ли.Как удалить поля для li в 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

просто введите 'float: left;' для вашего li ..... – Sarbaz

Добавить font-size: 0; в .unstyled затем добавить font-size (например, 16px), чтобы li к г алить белое пространство между инлайн-блочных элементов, как это:

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 - Крис Coyier

источник

2014-10-11 11:08:08 Anonymous

Попробуйте использовать float:left; и не display:inline-block; на предметы Li (.items_board > .item) Рабочий пример здесь http://jsfiddle.net/csdtesting/r7v5pfzx/

источник

2014-10-11 11:12:25

Как удалить поля для li в ul?

ответ

Смежные вопросы