Почему есть пробел после моего встроенного блока?

Question

Я использую стиль поплавка, чтобы удалить пробелы и я хочу его в центр, а другой белый пространство появляется после того, как мой div#bar

Это мой HTML:

<div id="foo"> 
    <div id="bar"> 
     <div class="divo divo1">test1</div> 
     <div class="divo divo2">test2</div> 
     <div class="divo divo3">test3</div> 
     <div class="divo divo4">test4</div> 
    </div> 
</div> 

и CSS:

#foo { 
    width: 100%; 
    background: #999; 
    text-align: center; 
} 
#bar { 
    display: inline-block; 
} 
.divo { 
    display: block; 
    float: left; 
} 

http://jsfiddle.net/Kodam/ay3ywtqa/

Примечание: я не хочу использовать стили отрицательного поля или размера шрифта 0.

Answer 1

Поскольку #bar является встроенным элементом, он имеет место, предназначенное для текстовых элементов спусковых (например, у, у, г). Вы можете плавать, что слева, но это разрушится, поэтому я рекомендую установить выравнивание по вертикали вверх:

#bar { 
    display: inline-block; 
    vertical-align:top; 
} 

jsFiddle example

Answer 2

попробовать это:

#foo { 
     width: 100%; 
     background: #999; 
     font-size:0; 
     text-align: center; 
    } 
    #bar { 
     display: inline-block; 
     font-size:13px; 
    } 

набора родительского размера шрифта до 0, а затем установите нужный размер шрифта для детей.

jsFiddle: http://jsfiddle.net/ay3ywtqa/3/