'display: inline', не выводящий два div в строке

Я пытаюсь привести два div в одной строке по горизонтали. При базовом поиске display:inline должен уметь это делать. Но посмотрите код ниже:'display: inline', не выводящий два div в строке

<div style="display:inline; "> 
 
    <div style="line-height:0pt; border:1px solid red" align="left" > 
 
     <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span> 
 
    </div> 
 
</div> 
 
<div style="display:inline "> 
 
    <div style="line-height:0pt;border:1px solid red" align="left" > 
 
     <span style="white-space:pre-wrap; font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span> 
 
    </div> 
 
</div>

Это держа дивы в двух отдельных линий, в то время как display:inline-block дает желаемое поведение:

<div style="display:inline-block; "> 
 
    <div style="line-height:0pt; border:1px solid red" align="left" > 
 
     <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span> 
 
    </div> 
 
</div> 
 
<div style="display:inline-block"> 
 
    <div style="line-height:0pt;border:1px solid red" align="left" > 
 
     <span style="white-space:pre-wrap; font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span> 
 
    </div> 
 
</div>

Но проблема у меня с display:inline-block, что это дает слишком много отступов, поэтому, когда я ожидаю, что две линии будут ближе друг к другу, у них будет много разрыва между ними, что неприемлемо. display: inline кажется способ пойти, но он просто не работает. Просьба объяснить такое поведение, и что можно сделать, чтобы сделать это правильно ..

источник

2015-02-16 Abdul Jabbar

С ситуацией 'display: inline' будет то же самое. Причина, по которой этот разрыв происходит, является обычным явлением для встроенных/встроенных элементов. – dfsq

Возможный дубликат [Как удалить пробел между элементами встроенного блока?] (Http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) –

«padding» между ними на самом деле просто пустое. – GolezTrol

Вы должны добавить display: inline как к контейнеру и внутренних дивы для сброса по умолчанию <div>display свойство, которое block.

div { 
 
    display: inline; 
 
}

<div> 
 
    <div style="line-height:0pt; border:1px solid red;" align="left"> 
 
    <span style="white-space:pre-wrap; font:Bold 10pt Helvetica; color:rgb(0,0,0);">STATE EMPLOYEES' PPO PLAN</span> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div style="line-height:0pt;border:1px solid red;" align="left"> 
 
    <span style="white-space:pre-wrap; font:normal 9pt Helvetica; color:rgb(0,0,0);">Administrative Services Provided by:</span> 
 
    </div> 
 
</div>

Что касается использования инлайн-блока, это общая проблема белого интервала: Fighting the Space Between Inline Block Elements

источник

2015-02-16 12:58:16 emmanuel

-1

.bloc_title { 
 
    font-family : Helvetica, sans-serif; 
 
    font-size : 13px; 
 
} 
 

 
.bloc { 
 
    display : inline; 
 
    border : solid 1px red; 
 
}

<div class = "bloc"> 
 
    <span class = "bloc_title"> 
 
    STATE EMPLOYEES' PPO PLAN 
 
    </div> 
 
</div> 
 
<div class = "bloc"> 
 
    <span class = "bloc_title"> 
 
    Administrative Services Provided by: 
 
    </span> 
 
    </span> 
 
</div>

Является ли это то, что вы хотели?

источник

2015-02-16 13:01:57

набор display:inline; ко всем элементам DIV, в противном случае у вас есть встроенный elemnet с блоком дочерний элемент, который сделает встроенный элемент Colapse (ширина и высота = 0) и дочерние свойства отображаются instead- display:block;

http://codepen.io/anon/pen/GgQzjr

источник

2015-02-16 13:03:47 pankijs

'display: inline', не выводящий два div в строке

ответ

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