Почему мои кнопки не отображаются в одной строке, если они находятся в одном div после смены класса? [Дубликат]
Это конкретный случай, но поскольку я пришел на эту страницу, ища решение и не нашел его, я добавлю его здесь.
Windows (проверена с 7) не принимать специальные символы (например, á) в именах классов и пакетов. Linux, однако.
Я узнал об этом, когда я построил .jar в NetBeans и попытался запустить его в командной строке. Он работал в NetBeans, но не в командной строке.
2 ответа
То, что вы сказали, очень правильно: «элемент встроенного блока, похоже, способен делать все, что может сделать элемент блока, но с небольшим дополнительным стилем». Это в основном связано с тем, что одно и то, и другое имеет общее, состоит в том, что они оба являются блочными контейнерами.
Однако есть улов.
Блок-блок участвует в контекст форматирования блоков и встроенный блок участвует в встроенном контексте форматирования (хотя он устанавливает контекст форматирования блока для его потомков, как и блок блоков при определенных условиях). См. Раздел 9.4 . В основном это означает, что встроенный блок обрабатывается так, как будто это текст, который, в свою очередь, означает, что большинство свойств, которые обычно применяются к тексту, также применяются к встроенному блоку. Эти свойства включают, среди прочих, text-indent, text-align и vertical-align.
Это может вызвать нежелательные побочные эффекты, которые вы можете легко предотвратить, не используя вначале display: inline-block. См. этот вопрос для интересного примера того, что может случиться.
Модель коробки для встроенных блоков также несколько отличается от модели блоков блоков. Раздел 10 содержит все подробные подробные сведения, но главными отличиями являются:
- Без объявления
width: 100%, как вы, возможно, предположительно, встроенный блок будет сжиматься, чтобы соответствовать его содержимому. - Поскольку встроенный блок работает в линию, вы не можете центрировать его с автоматическим левым и правым полями. Вместо этого вы используете
text-align: center. Само собой разумеется, что он должен быть в отдельной строке без текста, окружающего его в одной строке, но если вы устанавливаетеwidth: 100%, это не будет проблемой. - Inline- блоки never затронуты margin collapse .
Если вы пытаетесь создать макет на основе блоков, вы должны использовать display: block. Вообще говоря, при выборе между ними, вы всегда должны по умолчанию display: block, и только выберите display: inline-block, если у вас есть очень веская причина (и нет, блокирование краха запаса не является тем, что я считаю хорошей причиной).
-
1– Ahmad Alfy 8 July 2013 в 07:14
-
2– Spudley 10 July 2013 в 10:03
Я бы сказал все, что сказал @BoltClock; он делает много хороших моментов.
Я бы также добавил к этому, что, поскольку inline-block рассматривается как текст, окружающее пустое пространство также рассматривается как текст и, таким образом, вступает в игру таким образом, что оно не будет для элемента block. Это часто улавливает людей при попытке использовать inline-block для макета. Это, вероятно, самый большой «прием» для использования inline-block.
Еще одна немного более тонкая точка применяется конкретно в вашем случае, то есть при настройке width:100%. В этом случае вам нужно остерегаться той модели коробки, которую вы используете, поскольку стандартная модель коробки помещает ваши границы, отступы и поля за пределы ширины элемента. Таким образом, если вы используете границы, отступы или поля, ваш элемент будет занимать пространство чуть более 100%.
Эта точка применяется в равной степени к элементам block и inline-block, но, скорее всего, чтобы произойти с inline-block, потому что разница в том, что block обычно не нужно устанавливать на width:100%, потому что по умолчанию он расширяется, чтобы заполнить ширину в любом случае, и без модели окна, заставляющей ее переходить через край.
Чтобы избежать этого, вы можете переключить модель окна с помощью box-sizing:border-box, чтобы границы и т. д. были помещены в поле, и, таким образом, если вы попросите with:100%, это то, что вы получите , Подробнее читайте на странице MDN box-sizing .