内联块挑战和布局建议

Question

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

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

Answer 1

如果您已经按照上面的评论进行操作，则会提出很多问题。我会尽量总结其中的大部分内容。

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

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

对于 display:table-cell，vertical-algin 属性影响所有子元素，再次排除一些定位元素。

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

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>

内联块挑战和布局建议

Inline block challenges and suggestions for the layout

css

layout

css-float

navbar