Question

我最近问了一个关于导航按钮的类似问题，并且在下方和上方都有空白，并且回答得非常好。这是问题Navigation Buttons no whitespace underneathe

基本上我现在按钮上方有空格，我需要它关闭。

此外，我希望按钮中的文字在垂直和水平方向都是中心。

enter image description here

Js小提琴：

HTML：

<div class="row">
    <div class="large-9 small-12 columns" id="contact-top-pad">
        <p>
            <span class="contact-top">Phone</span><span class="smaller">- 0757776856</span> 
            <span class="contact-top">Email</span><span class="smaller">- luke@bodymetrix.com</span>
    </div>
    <div class="large-3 small-10 columns" id="social-btn">
        <img src="img/facebook-btn.png" alt="Facebook">
        <img src="img/twitter-btn.png" alt="Twitter">
        <img src="img/pin-btn.png" alt="Pintrest">
        <img src="img/google-btn.png" alt="Google+">
    </div>        
    <hr>
</div>

<div class="row">
    <div class="large-6 small-12 columns">
        <div class="logo"><img src="img/logo.png" alt="Body Metrix"></div>
    </div>

    <div class="large-6 columns" id="nav-btn">
        <ul class="navigation">
            <li class="active"><a href="home.html">Home</a></li><!--
         --><li class="not"><a href="#">About</a></li><!--
         --><li class="not"><a href="#">Contact</a></li><!--
         --><li class="not"><a href="#">Services</a></li>
        </ul>
    </div>
    <hr>
</div><!--

CSS：

hr {
    margin:0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#social-btn{    
    display: inline;
    padding-left: 50px;
    padding-top: 20px;
}

#contact-top-pad {    
    padding-top: 25px;    
}

.contact-top {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: inline;    
}

.smaller {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: lighter;    
}

.logo img {
    max-width: 35%;
    min-height: auto;
    padding-bottom: 10px;
}

.navigation { margin:0; }

由于

Answer 1

将line-height值添加为li高度

的相同值

.navigation li a {
    text-align: center;
    padding: 30px 10px 10px 30px;
    line-height:100px;
}

结果： http://jsfiddle.net/ygfX7/1/

Answer 2

从border-bottom移除hr以摆脱选项上方的小空间：

hr {
    margin:0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

并向line-height: 100px;添加.navigation li a，这会使文本垂直居中：

.navigation li a {
    text-align: center;
    padding: 30px 10px 10px 30px;
    line-height:100px;
}

这是小提琴：http://jsfiddle.net/ygfX7/5/

不需要的空白

2 个答案: