我有两个完全不相关的元素,.menu
, 和 .content_selection_button
.唯一将它们联系在一起的是它们都在里面 <li>
相同的元素 <ul>
,除此之外他们没有任何共享。然而,出于某种原因,当我更改 .content_selection_button
的字体大小时它会影响菜单的垂直位置。我有类似的问题here .为什么字体大小会破坏我的位置,我该如何阻止它?
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>
最佳答案
我暗示过使用行内 block 元素的底部垂直对齐可以解决对齐问题。 这可以通过重新设计标记和 CSS 简单地修改 UI 来避免。
[ELEMENT] {
vertical-align: text-bottom;
}
关于html - CSS 字体大小破坏放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22558529/