#html #css
Вопрос:
здравствуйте, я хочу, чтобы эти теги были отсортированы в одной строке
но тег с внутренним текстом сортируется вниз, тег без внутреннего текста
текст отсортирован
таким образом, высота этих тегов неверна
Я хочу отсортировать это поле(класс==a) в одной строке
каково же решение?
пример кода находится внизу
lt;htmlgt; lt;headgt; lt;titlegt;alt;/titlegt; lt;meta charset = "utf-8"gt; lt;stylegt; .a { width: 17%; height: 5%; display: inline-block; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;span class = "a"gt;lt;/spangt; lt;span class = "a"gt;2lt;/spangt; lt;span class = "a"gt;2lt;/spangt; lt;span class = "a"gt;2lt;/spangt; lt;span class = "a"gt;2lt;/spangt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. Ваш код в 1 строке, что вы пытаетесь сделать ? и высота в % будет применяться только в том случае, если контейнер имеет фиксированную высоту. Чтобы все ваши
aбыли одного роста ?
Ответ №1:
1.) Если вы определяете height значение в процентах, родительскому элементу требуется определенная высота. Ниже я определил 100% высоту для body (прямого родителя) и html родителя body ). Если это находится внутри a div , для этого div требуется определение высоты.
2.) Для выравнивания встроенных блоков по их верхней границе вы можете использовать vertical-align: top; (по умолчанию baseline иначе)
html, body { height: 100%; min-height: 600px; } .a { width: 17%; height: 5%; display: inline-block; border: 1px solid red; vertical-align: top; } lt;bodygt; lt;span class="a"gt;lt;/spangt; lt;span class="a"gt;2lt;/spangt; lt;span class="a"gt;2lt;/spangt; lt;span class="a"gt;2lt;/spangt; lt;span class="a"gt;2lt;/spangt; lt;/bodygt;