HTML-фитинги в div

0

Я очень просто пытаюсь сделать 5 Divs inline, внутри div. Я делаю это, просто создавая div, и внутри этого div имеет 5 divs с шириной по 20% каждый, все используют встроенный блок.

Тем не менее, все im получают 4 моих divs в родительском div, а пятый переполняется на следующую строку.

Как это могло произойти? 5 x 20 = 100%, так почему это похоже на больше?

Изображение 174551

Изображение 174551

http://pastebin.com/uS6vcwTM HTML-код

http://pastebin.com/VKHS7swJ CSS-код

  • 2
    Разместите свой HTML и CSS, пожалуйста.
  • 0
    Ой опечатка в вопросе. Исправленный. Попадет на вставку из HTML и CSS.
Показать ещё 3 комментария
Теги:

2 ответа

3
Лучший ответ

Встроенные элементы чувствительны к пробелу. Вы можете удалить пробел между divs как:

<div id="Navigation">
    <div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div><div class="NavButton">Button</div>
</div>

Пример jsFiddle

Или добавьте float:left в класс NavButton.

Пример jsFiddle

Поделиться
  • 1
    Использование float: left отлично работает для меня. Большое спасибо!
2

Inline-block учитывает пробелы в вашем HTML.

Обычно это эквивалентно 0,025 или 4 пикселя в зависимости от размера шрифта вашего браузера.

Есть несколько способов решить эту проблему.

Первое и, возможно, самое простое - это установить размер шрифта родителя на 0. Затем размер шрифта должен быть сброшен в дочерних... поля

Демо-версия JSFiddle

Поделиться
  • 0
    просто плавать внутренние дивы
  • 0
    @Paul, я пытался установить родительский размер шрифта на 0, и все сводится с ума. Однако я чувствую, что вы правы ..

Ещё вопросы

Сообщество Overcoder
Наверх
Меню