Question

请参阅下面的代码：

HTML =＆gt;

<header>
    <div class="menuWrap">
        <a href="" class="menuItem" title="Home">Home</a>
        <a href="" class="menuItem" title="About">About</a>
        <a href="" class="logoItem" title="Adam McCann">AM</a>
        <a href="" class="menuItem" title="Work">Work</a>
        <a href="" class="menuItem" title="Contact">Contact</a>
    </div>
</header>

CSS =＆gt;

header {
    width: 100%;
    height: 80px;
    background-color: #F5F5F5;
    border-bottom: 1px solid #E6E6E6;
}

.menuWrap {
    margin: 0 auto;
    width: 80%;
    height: 100%;
    text-align: center;
}

.menuItem {
    line-height: 80px;
    display: inline-block;
    width: 20%;
    color: #1DC0CE;
    text-decoration: none;
    font-family: 'Lobster', cursive;
    font-size: 25px;
    -o-transition: .2s;
    -ms-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s;            
}

.logoItem {
    line-height: 80px;
    display: inline-block;
    width: 15%;
    background-color: #1DC0CE;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Lobster', cursive;
    font-size: 25px;
    border-bottom: 1px solid #1DC0CE;
    -o-transition: .2s;
    -ms-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s;        
}

当我增加'logoItem'的字体大小时，'menuItem'元素位置正在移动（文本向下移动页面）

有关如何制止此事的任何提示！？

Answer 1

给它们一个统一的高度，并确保它足够大，适用于两种尺寸：

#menuWrap a {
    display:inline-block;
    height:30px;
}

你也应该摆脱line-height声明。

在不影响其他类的情况下修改字体大小

1 个答案: