Нет пробела между кнопками «на следующей строке»

Question

Нет пробела между кнопками «на следующей строке»

0

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

Моя проблема заключается в том, что между кнопками в первой строке нет пробелов и строк в следующих строках:

Я пытаюсь воспроизвести эту проблему в JSFiddle, но этого не происходит:

Мой HTML:

<div>
    <span class="menuButton">Button I Button I Button I</span>
    <span class="menuButton">Button II Button II Button II</span>
    <span class="menuButton">Button III Button III Button III</span>
</div>

Мой CSS:

.menuButton {
    color: #FFFFFD;
    background: #010109;
    margin: 3px 0px 3px 0px;
    padding: 1px 6px 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Istok Web', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

Почему у меня такая проблема на моей странице, а не на JSFiddle? Я опубликовал страницу (работа в процессе) здесь. Уменьшите размер окна до 320 пикселей, чтобы воспроизвести проблему.

Jérôme Verstrynge 19 сен. 2013, в 17:57

Источник

Теги:

html

css

button

spacing

3 ответа

1

Попробуйте добавить строку-высоту в содержащий div:

<div class="menu">
    <span class="menuButton">Button I Button I Button I</span>
    <span class="menuButton">Button II Button II Button II</span>
    <span class="menuButton">Button III Button III Button III</span>
</div>

.menu {
    line-height: 1.2;
}
.menuButton {
    color: #FFFFFD;
    background: #010109;
    margin: 3px 0px 3px 0px;
    padding: 1px 6px 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Istok Web', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

http://jsfiddle.net/kKQ5A/

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

michaelward82 19 сен. 2013, в 13:35

0

Вы используете spans которые являются встроенным элементом в отличие от элемента блока, и, следовательно, они не пересматривают css-стиль, например margin. Измените свои spans на divs или дайте пространству display:inline-block; свойств display:inline-block;

user1524571 19 сен. 2013, в 14:09

0

Изменяя интервалы в div, кнопка расширяет всю ширину, что нарушает макет ....
Jérôme Verstrynge 19 сен. 2013, в 15:51

Ещё вопросы

Изменяя интервалы в div, кнопка расширяет всю ширину, что нарушает макет ....

xandercoded · Accepted Answer · 2013-09-19T14-17-00.000Z

У вас проблема, потому что span - это естественные встроенные элементы (display:inline). Если вы хотите отобразить их как inline-block тогда будут применяться настройки маржи.

.menuButton {
    /* ... existing definitons */

    display: inline-block;
}