09月10, 2016

display:inline-block不对齐问题

需求描述:

书写一个导航栏,使用displayinline-block属性进行布局。 导航栏内容:<h1>title</h1>

<ul>
    <li>item1</li>
    <li>item2</li>
    ...
<ul>

构成。 提示:使用最简单的DOM结构,拒绝一切多余嵌套<div></div>

展现形式,如下图: alt

实现方式

建立简单的DOM结构如下代码:(忽略其中的<NavLink/>,此为react实现的router).

<ul role="nav" className="nav">
    <li><h1>React Router Tutorial</h1></li>
    <li><NavLink to="/" onlyActiveOnIndex>Home</NavLink></li>
    <li><NavLink to="/about">About</NavLink></li>
    <li><NavLink to="/repos">Repos</NavLink></li>
    <li><NavLink to="/checkbox">checkbox</NavLink></li>
</ul>

添加相应的css代码如下。

.nav{
    width: 100%;
    height: 60px;
    background: #333333;
}
.nav li h1{
    display: inline-block;
    color: #fff;
    margin: 0 30px 0 30px;
}
.nav li{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.nav li a {
    color: #aaaaaa;
    display: block;
    text-decoration: none;
    padding: 0 10px;
    cursor: pointer;
}
.nav li a.active {
    color: #fff;
    background: #555;
}

展示效果如下。

alt

可以看到,nav中没有和h1中的内容对齐,反而往下移动了一部分。其实,是和h1对齐的,只不过在不同标签中,对齐的方式有所区别,可以看到,nav中的文字内容,是和h1中的文字内容底部是对齐的。如果在该ulli中,没有h1,只有a,则不用进行以下内容。如果有,请看below。 解决方案

需要在li中添加,vertical-align: center属性进行垂直居中。由此可见,vertical-align属性是相对于父容器的,而不是像text-align相对于本身。 完整CSS代码

.nav{
    width: 100%;
    height: 60px;
    background: #333333;

}
.nav li h1{
    display: inline-block;
    color: #fff;
    margin: 0 30px 0 30px;
}
.nav li{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    vertical-align: middle; /*垂直居中*/
}
.nav li a {
    color: #aaaaaa;
    display: block;
    text-decoration: none;
    padding: 0 10px;
    cursor: pointer;
}
.nav li a.active {
    color: #fff;
    background: #555;
}

最终展示结果

alt

Tips

可以在Chrome中的控制台进行CSS代码的调试,取消line-height或者vertical-align,有惊喜 !

本文链接:https://beacelee.com/post/display-inline-block.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。