Html CSS字体大小破坏放置

我有两个完全不相关的元素，

.menu

和

.content\u selection\u按钮

。唯一将它们联系在一起的是，它们都位于同一

元素中的

元素中，只是它们不共享任何内容。然而，由于某种原因，当我更改
.content\u selection\u按钮的字体大小时，它会影响菜单的垂直位置。我也有类似的问题。为什么字体大小会破坏我的位置，我如何才能阻止它


字体大小10


字体大小25


菜单CSS

.menu {
    display: inline-block;
    background-color:lightblue;
    margin: 1px;
    padding: 2px;
    box-sizing: border-box;
    border-radius:5px;
}

.content_selection_button{
    font-size: 10px;
    box-sizing: border-box;
    border-radius:5px;
}

内容选择按钮CSS

.menu {
    display: inline-block;
    background-color:lightblue;
    margin: 1px;
    padding: 2px;
    box-sizing: border-box;
    border-radius:5px;
}

.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="You've main parent element's with height 150px with LI inside 25% height. so that comes around 37.5px. The height wont increase due to the increase in font size, but it will affect the calculated line height, the line-height will increase pushing the text below a central axis of the button.
I hinted that playing with bottom vertical alignment of the inline-block elements could fix the alignment issues. This could be avoided by simplyfing the UI by reworking the mark-up and CSS.


[ELEMENT] {
  vertical-align: text-bottom;
}





+


M






主父元素的高度为150px，LI在25%的高度内。这大约是37.5px。高度不会因字体大小的增加而增加，但会影响计算的行高，按按钮中心轴下方的文本时，行高会增加。
我暗示，使用内联块元素的底部垂直对齐可以解决对齐问题。这可以通过修改标记和CSS来简化UI来避免

你能提供一个js小提琴与更多的样式，这是很难调试这样？此外，默认情况下，“内联块”设置为“垂直对齐”：middle@JohanVandenRym不正确，
垂直对齐
的初始值是
基线
@JohanVandenRym我添加了fiddle@Oriol是的，你说得对-这是基线。@JohanVandenRym但是基线和菜单有什么关系呢。我遇到了一个类似的问题，搜索按钮与搜索栏不对齐，因为它太大了，但在这里它们是独立的元素。这会导致其他所有东西移动吗？为什么文本不能在元素内部移动，而不去管其他的东西呢？