2014-08-29 100 views
0

我正在開發一個網站,我開始不引導,並提出了簡單的導航欄,還有我用線的高度和垂直對齊這樣的:垂直對齊和行高不工作

.navigation { 
padding:0; 
margin:0; 
background:#efefef; 
position:fixed; 
list-style:none; 
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ; 
top:0; 
z-index:998; 
width:100%; 
text-align:center; 
font-size:12px; 
font-family: 'Montserrat', sans-serif; 
li { 
    display:inline-block; 
    vertical-align:middle; 
    line-height:15px; 
    padding: 15px 25px; 
    a{ 
     display:inline-block; 
     color:#6d6d6d; 
     text-decoration:none; 
     &:hover{ 
      color: lighten(#6d6d6d, 20%); 
     } 
    } 
} 

現在用引導後的不工作了,這裏是引導後的標記:

<div id="custom-navbar" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-brand"> 
      <img src="imgs/logo.png"> 
     </div> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     MENU 
     </button> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul id="custom-navbar-ul" class="nav navbar-nav navbar-right"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#">BENEFITS</a></li> 
       <li><a href="#">APPS<br>WIDGET</a></li> 
       <li><a href="#">PLACEMENT<br>GUIDE</a></li> 
       <li><a href="#">BLOG</a></li> 
       <li><a href="#">ABOUT</a></li> 
       <li><button type="button" id="sign-up" class="btn btn-sm"><a href="#">SIGN UP</a></button></li> 
       <li><button type="button" id="sign-in" class="btn btn-sm"><a href="#">SIGN IN</a></button></li> 
      </ul> 
     </div> 
    </div> 

</div> 

而且標記:

#custom-navbar{ 
height:80px; 
background:#efefef; 
box-shadow: 0 2px 5px 0 lighten(#000, 55%) ; 
z-index:9999;} 

#custom-navbar-ul{ 
text-align:center; 
font-size:12px; 
li{ 
    display:block; 
    vertical-align:middle; 
    line-height:15px; 
    padding:.7% 8px; 
}} 

我看到了幾個要求使用表格的答案,我做了,但仍然沒有效果,可能是什麼問題?

回答

1

試造型也喜歡:

#custom-navbar-ul { 
    text-align:center; 
    font-size:12px; 
} 
#custom-navbar-ul li { 
    display:block; 
    vertical-align:middle; 
    line-height:15px; 
    padding:.7% 8px; 
} 
+0

這是沒有效果的,我使用SCSS,所以當我在生成的css文件擡頭一看,它有輸出作爲你的答案相同。 不知道爲什麼不工作。 – dw19 2014-08-30 05:04:26