按鈕將不會上浮到導航欄

這裏是我使用的CSS：按鈕將不會上浮到導航欄

body { 
    font-family: 'Open Sans', sans-serif; 
    background-color: #DB1F1F; 
    } 

.navbar-menu { 
    background-image: linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%); 
background-image: -o-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%); 
background-image: -moz-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%); 
background-image: -webkit-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%); 
background-image: -ms-linear-gradient(bottom, rgb(72,174,52) 41%, rgb(101,209,78) 71%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.41, rgb(72,174,52)), 
    color-stop(0.71, rgb(101,209,78)) 
); 

background-repeat: repeat-x; 
border-color: #2DB51B; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
border-style: solid; 

    height: 50px; 
    width: 100%; 
    margin: 0px 0px; 
    position: relative; 


} 

.navbar-menu ul { 
    list-style-type: none; 
    position: absolute; 
    display: inline; 
} 

.navbar-menu li { 
    display: inline; 
    position: relative; 
} 

.navbar-menu a { 
    text-decoration: none; 
    color: #FFFFFF 
} 

.navbar-btn { 
    background-color: #44D1DB; 
    border-radius: 7px; 
    border: 1px solid #65A6AB; 
    height: 20px; 
    width: 45px; 
    padding: 10px; 
    position: relative; 
} 

.navbar-btn:hover { 
    background-color: #6CCCF5; 
}

基本上我試圖讓他走多了起來，因爲它是完全被卡住下來。下面是我使用的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
    <title>Button</title> 
    </head> 
<body> 
    <div class="navbar-menu"> 
    <ul> 
    <div class="navbar-btn"><li><a href="#">HTML</a></li></div> 
    </ul> 
    </div> 

</body> 
</html>

可以使用的jsfiddle，看看它的樣子，我不知道如何解決它，我試圖把的位置是：相對的;試圖解決它。

頂部，邊緣底部只是讓它上升一點，我想它適合在導航欄上。有人可以幫忙嗎？

來源

2013-07-13 Razor Wedner

試試這個：

CSS：

body { 
    font-family:'Open Sans', sans-serif; 
    background-color: #DB1F1F; 
} 
.navbar-menu { 
    background-image: linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%); 
    background-image: -o-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%); 
    background-image: -moz-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%); 
    background-image: -webkit-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%); 
    background-image: -ms-linear-gradient(bottom, rgb(72, 174, 52) 41%, rgb(101, 209, 78) 71%); 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(72, 174, 52)), color-stop(0.71, rgb(101, 209, 78))); 
    background-repeat: repeat-x; 
    border-color: #2DB51B; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border-style: solid; 
    height: 50px; 
    width: 100%; 
    margin: 0px 0px; 
    position: relative; 
} 
.navbar-menu ul { 
    list-style-type: none; 
    position: relative; 
    display: inline; 
} 
.navbar-menu li { 
    display: inline; 
    position: relative; 
} 
.navbar-menu a { 
    text-decoration: none; 
    color: #FFFFFF 
} 
.navbar-btn { 
    background-color: #44D1DB; 
    border-radius: 7px; 
    border: 1px solid #65A6AB; 
    height: 20px; 
    width: 45px; 
    padding: 10px; 
    display: inline-block; 
} 
.navbar-btn:hover { 
    background-color: #6CCCF5; 
}

Demo.

來源

2013-07-13 12:23:16

它的工作中刪除此<div class="navbar-btn"><li><a href="#">HTML</a></li></div>！但是我嘗試添加更多按鈕（它與我用於HTML的navbar-btn相同），並且它剛剛啓動。幫幫我？下來我的意思是更多的按鈕向右按下HTML按鈕。 –

@ user2550778看到這個：http://jsfiddle.net/NUuPE/1/ –

與此<li class="navbar-btn"><a href="#">HTML</a></li>

來源

2013-07-13 12:34:08

，這使得它更糟。 –

這就是它的樣子http://jsfiddle.net/n48tF/1/ –

按鈕將不會上浮到導航欄

回答

相關問題