CSS字体大小破坏位置答案

【问题标题】：CSS font-size wrecking placementCSS字体大小破坏位置
【发布时间】：2014-04-28 19:21:46
【问题描述】：

我有两个完全不相关的元素，.menu 和 .content_selection_button。唯一将它们联系在一起的是它们都在同一个<ul> 中的<li> 元素内，除了它们不共享任何内容。然而，由于某种原因，当我更改 .content_selection_button 的字体大小时，它会影响菜单的垂直位置。我有一个类似的问题here。为什么字体大小会破坏我的展示位置，我该如何阻止它？

JSFIDDLE

字号 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>

【问题讨论】：

你能提供一个更多样式的 js fiddle，这样很难调试吗？ inline-block 默认设置为 vertical-align: middle
@JohanVandenRym 不正确，vertical-align 的初始值为baseline
@JohanVandenRym 我添加了小提琴
@Oriol 是的，你是对的 - 这是基线。
@JohanVandenRym 但基线与菜单有什么关系。我有一个类似的问题，搜索按钮与搜索栏不对齐，因为它太大了，但在这里它们是单独的元素。

标签： html css position alignment font-size

【解决方案1】：

我暗示使用 inline-block 元素的底部垂直对齐可以解决对齐问题。 这可以通过修改标记和 CSS 来简化 UI 来避免。

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

【讨论】：

【解决方案2】：

您的主父元素的高度为 150 像素，LI 在 25% 的高度内。所以大约是 37.5px。由于字体大小的增加，高度不会增加，但会影响计算的行高，将文本推到按钮中心轴以下时，行高会增加。

【讨论】：

这会导致其他一切都移动？为什么文本不直接在元素内移动，而让其他所有内容不理会？