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表是在这种情况下完成所需布局的最简单方法。由于您可以轻松地在其上设置垂直和水平对齐。这是一个简化的解决方法。

<强> JsFiddle Demo

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

内联块挑战和布局建议

1 个答案: