У меня есть два элемента, которые довольно несвязаны: .menu
и .content_selection_button
. Единственное, что связывает их вместе, это то, что они находятся внутри <li>
элементов в той же <ul>
, кроме того, что они ничего не имеют. Тем не менее, по какой-то причине, когда я изменяю размер шрифта .content_selection_button
это влияет на вертикальное размещение меню. У меня была аналогичная проблема здесь. Почему размер шрифта разрушает мое размещение и как его остановить?
Размер шрифта 10
Размер шрифта 25
Меню CSS
.menu {
display: inline-block;
background-color:lightblue;
margin: 1px;
padding: 2px;
box-sizing: border-box;
border-radius:5px;
}
Кнопка выбора контента CSS
.content_selection_button{
font-size: 10px;
box-sizing: border-box;
border-radius:5px;
}
HTML
<ul class="t_inject_container">
<li class="t_inject_row">
<ul class="menu">
<li id="LI_4">
<button class="add_button t_intect_button">
+
</button>
</li>
<li>
<button class="minimize_button t_intect_button">
m
</button>
</li>
</ul>
</li>
<li>
<ul class="content_selection_container">
<li>
<form name="search_form" class="search_form">
<input type="text" name="search_input" class="search_bar" />
<input type="submit" value="" class="search_button" name="search_button" />
</form>
</li>
<li id="LI_14">
<button class="content_selection_button">
My Timeline
</button>
</li>
<li>
<button class="content_selection_button">
relevent
</button>
</li>
<li>
<button class="content_selection_button">
mentions
</button>
</li>
</ul>
</li>
</ul>
Я намекнул, что игра с нижним вертикальным выравниванием элементов встроенного блока может исправить проблемы выравнивания. Этого можно избежать, просто используя интерфейс пользователя, переработав надпись и CSS.
[ELEMENT] {
vertical-align: text-bottom;
}
У вас есть основной родительский элемент с высотой 150 пикселей с LI внутри 25% высоты. так что получается около 37.5px. Высота не увеличится из-за увеличения размера шрифта, но это повлияет на вычисленную высоту линии, высота линии увеличится, нажав текст под центральной осью кнопки.
vertical-align
являетсяbaseline