Дисплей: проблемы встроенного блока

Question

Дисплей: проблемы встроенного блока

0

Я использую display: inner-block в моем коде. Но встроенный блок автоматически назначает отступы между div, которые вызывают несовместимость браузера на моем сайте. Может ли кто-нибудь указать на решение.

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

http://jsfiddle.net/damsarabi/vbhnF/#&togetherjs=4aiQ9gSCpq

Это базовый код для справки в скрипке

<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>


div{
 border:1px solid #000   
}

div.LabelColumn
{
    display: inline-block;
    vertical-align: top;
}

С Уважением,

Maclean Pinto 16 дек. 2013, в 11:46

Источник

Теги:

html

css

4 ответа

2

По умолчанию добавляется дополнительный margin-right 4px (в зависимости от родителя-шрифта).

Вы можете исправить эту проблему с помощью настройки css. Это решение, которое я использую чаще, и это простой способ настроить это выравнивание.

div.LabelColumn
{
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}

Вы можете увидеть больше настроек по этой ссылке: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

jbr 16 дек. 2013, в 07:22

0

Я рекомендую прочитать упомянутую статью CSS-Tricks - я тоже ее прочитал, и это очень полезно. +1 за это.
keaukraine 16 дек. 2013, в 10:06

1

Также вы можете установить font-size 0 и установить необходимый font-size для плавающих элементов. Это устранит пробелы. Это полезно для случаев, когда вы не можете избежать белых пробелов между вашими элементами (например, некоторые IDE могут быть настроены на автоматическую переформатирование разметки).

div.LabelColumn
{
    font-size:16px;
    display: inline-block;
    vertical-align: top;
    text-align:left;
    border:1px solid #000;
}

.full_width {
   width:100%;
   font-size:0;
}

Демо: http://jsfiddle.net/keaukraine/htAR6/2/

keaukraine 16 дек. 2013, в 08:30

0

Попробуй это:

<div class="LabelColumn">label column</div>
<div class="DataColumn">data column</div>

div.LabelColumn
{
    font-size:16px;
    display: inline-block;
    vertical-align: top;
    text-align:left;
    border:1px solid #000;
}

.full_width {
   width:100%;
   font-size:0;
}

Mr.G 16 дек. 2013, в 09:07

Ещё вопросы

Я рекомендую прочитать упомянутую статью CSS-Tricks - я тоже ее прочитал, и это очень полезно. +1 за это.

George · Accepted Answer · 2013-12-16T08-42-00.000Z

встроенный блок автоматически не добавляет поля, он является встроенным, что означает, что он обращает внимание на ваше свободное пространство между каждым элементом. Даже если это может выглядеть как 4px или около того, это не просто одно пространство. Одним из способов обойти это было бы удаление пробелов:

<div class = "LabelColumn">asdfasdf</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div>

Другой, чтобы прокомментировать пробелы:

<div class = "LabelColumn">asdfasdf</div><!--
--><div class = "LabelColumn">asdfasdf</div>

JSFiddle

Или, наконец, но не в последнюю очередь, float:left вместо изменения типа display:

JSFiddle

Я читал об этом. Человек, как я могу забыть. Потрачено впустую 5 часов с этим. Спасибо друг