内联块挑战和布局建议答案

【问题标题】：Inline block challenges and suggestions for the layout内联块挑战和布局建议
【发布时间】：2015-06-16 01:45:51
【问题描述】：

我一直在阅读有关浮点数已过时以及使用 inline-block 可以解决诸如必须使用 clearfix 等问题的文章。这些文章通过显示相同的示例继续证明 inline-block 的合理性：三个中间对齐的正方形。在尝试使用 inline-block 创建导航栏时，我遇到了很多问题。我的导航栏布局如下所示：

<nav id="main-nav" class="navbar">  
    <div class="logo">
       <!-- image -->
    </div><!--   
 --><div class="navbar-header"><!-- 
     --><button type="button" class="navbar-toggle closed">
            <span class="sr-only">Toggle navigation</span>
            <i class="fa fa-bars"></i>
        </button>
    </div>     
    <div class="navbar-collapse navbar-sidebar">    
        <ul class="navbar-nav">
            <!-- list-items -->
        </ul>
    </div>                
</nav>

为了使徽标左对齐和导航栏切换按钮右对齐，我不得不使用 text-align justify 和一些特殊标记，我发现它们与 clearfix (Align two inline-blocks left and right on same line) 一样突兀：

.header {
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

.logo {
    display: inline-block;
    vertical-align: top;       
}
.navbar-header {
    display: inline-block;
    vertical-align: middle;         
}

我的导航栏与 Bootstrap 的非常相似。在小屏幕尺寸下，我希望我的导航栏切换按钮位于导航栏区域的中心。垂直对齐：然而，将这个按钮与我的徽标中间对齐，这将比导航栏短或高，并且我也希望对齐到导航栏的顶部。内联块不允许我将我的内容垂直对齐到父容器，这似乎使它在许多布局中成为不可行的选项。是否有某种解决方案可以使我的内容与容器而不是同级元素对齐？我一直在尝试设置不同的行高和垂直对齐。

【问题讨论】：

你能把问题的具体内容简述一下吗？此外，与 Bootstrap 一起，事情将变得更加难以使用，并制作演示。
主要问题是使用内联块，我发现只能将子元素与其兄弟元素对齐。我的印象是 inline-block 可以将子元素与它们的父容器对齐。现在我看到子元素之间的交互使得很难控制这些元素相对于它们的容器的对齐方式。我希望我的徽标元素与导航栏的顶部对齐，但我的 .navbar-header（内部带有按钮）与容器的中心对齐。
在这种情况下，您可以在另一个内联块中执行内联块，表格单元格也非常适合 v align 的东西。
就第一个解决方案而言，添加更多标记肯定会超过使用浮点数，因为我已经引入了与 clearfix 一样引人注目的标记来完成这项工作，以及诸如“垂直对齐”和“显示：内联块”。至于第二种解决方案，在 .navbar-header 上声明“display: table”会将其移至新行，因此我需要一个浮动容器或一个内联块容器。
所以我已经在技术上实现了我想要的没有浮动，但绝对不是以理想的方式（我之前以更接近理想的方式创建了带有浮动的相同布局）。首先，“进攻”是我指定我希望 .navbar-header 是 .navbar 的高度（70px）。其次，我在 .navbar 标题中创建了一个幽灵元素，它的高度为 100%，使我的按钮居中。 inline-block 的伟大之处在于您可以在不声明高度/宽度的情况下居中。在这种情况下，我只是看不到有任何方法可以在不声明高度的情况下居中。我错过了什么吗？

标签： css layout css-float navbar

【解决方案1】：

如果您已经按照上面的 cmets 进行操作，就会有很多问题被问到。我会尽量总结大部分内容。

对于display:inline-block，vertical-algin 属性仅影响元素本身的位置，以及相对于兄弟元素（尤其是最高的兄弟元素）的位置。

像height:100%这样的百分比高度，仅适用于父容器的固定高度，或者一直设置回<html>标签的所有百分比高度。但不包括定位（relative、absolute 等）元素和视口单元vh，可能还有其他一些情况。

对于display:table-cell，vertical-algin 属性会影响所有子元素，同样不包括一些定位的元素。

我认为 CSS 表格是在这种情况下完成所需布局的最简单方法。因为您可以轻松地在其上设置垂直和水平对齐方式。这是一个简化的解决方法。

JsFiddle Demo

.nav {
    border: 1px solid red;
    display: table;
    width: 100%;
}
.nav > div {
    display: table-cell;
    vertical-align: middle;
}
.logo img {
    display: block;
}
.menu {
    text-align: right;
}
.menu span {
    border: 1px solid blue;
}

<div class="nav">
    <div class="logo">
        <img src="//dummyimage.com/50"/>
    </div>
    <div class="menu">
        <span>Menu</span>
    </div>
</div>

【讨论】：