css встроенный элемент падает, когда достигается 100% [дубликат]

К сожалению, это 2015 год, а white-space-collapse все еще не реализовано.

Пока давайте родительский элемент font-size: 0; и установите font-size для детей. Это должно сделать трюк

размер шрифта: 0; может быть немного сложнее управлять ...

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

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Тогда вы можете использовать его как следующий ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Насколько я знаю (я могу ошибаться), но все браузеры поддерживаем этот метод.

ОБЪЯСНЕНИЕ:

Это работает (возможно, может быть, возможно, -3px) в точности так, как вы ожидали, что он будет работать.

• скопируйте и вставьте код (один раз)
• , затем на вашем html просто используйте class="items" в родительском блоке каждого встроенного блока.

У вас не будет необходимости вернуться к css и добавить еще одно правило css для ваших новых встроенных блоков.

Решение сразу двух проблем.

Также обратите внимание на > (больше знака) это означает, что * / все дети должны быть встроенными блоками.

http://jsfiddle.net/fD5u3/

ПРИМЕЧАНИЕ. Я изменил приспосабливаться к наследованию разметки букв, когда оболочка имеет дочернюю оболочку.

Хорошо, хотя я уже рассмотрел ответы font-size: 0; и not implemented CSS3 feature, после попытки выяснил, что ни одно из них не является реальным решением.

На самом деле нет даже одного обходной путь без сильных побочных эффектов.

Затем я решил удалить пробелы (это ответы об этом аргументе) между inline-block divs из моего источника HTML (JSP), превратив это:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

к этому

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

, который является уродливым, но работает.

Но подождите минуту ... что, если я создаю свой div внутри Taglibs loops (Struts2, JSTL и т. д.)?

Например:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Абсолютно не мыслимо встроить все это, это означало бы

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

, что невозможно прочитать, трудно

Решение, которое я нашел:

использует комментарии HTML, чтобы связать конец одного div с началом следующего!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

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

И, как положительный побочный эффект, HTML source, хотя и заражены пустым комментарием , приведет к правильному отступу;

возьмем первый пример: imho this:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

лучше этого

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Надеюсь, что это поможет ...

Самый простой ответ на этот вопрос - добавить.

css

float: left;

codepen link: http://jsfiddle.net/dGHFV/3560/

Для CSS3-совместимых браузеров есть white-space-collapsing:discard

: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space -collapsing

Добавьте display: flex; к родительскому элементу. Вот решение с префиксом:

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Обновить

Упрощенная версия

Я нашел чистое решение CSS, которое очень хорошо работало для меня во всех браузерах:

span {
    display: table-cell;
}

Добавить комментарии между элементами, чтобы НЕ иметь пробел. Для меня это проще, чем сбросить размер шрифта до нуля и затем установить его обратно.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Я думаю, что для этого есть очень простой / старый метод, который поддерживается всеми браузерами даже IE 6/7. Мы могли бы просто установить letter-spacing на большое отрицательное значение в родительском, а затем вернуть его к normal в дочерние элементы:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>