按钮不会进入导航栏答案

【问题标题】：Button won't go up into the navigation bar按钮不会进入导航栏
【发布时间】：2013-07-13 12:18:35
【问题描述】：

这是我正在使用的 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 并查看它的外观，我不确定如何修复它，我尝试放置 position: relative;试图修复它。

Top，margin-bottom 只是让它上升一点，我希望它正好适合导航栏。有人可以帮忙吗？

【问题讨论】：

标签： html css button css-position navbar

【解决方案1】：

试试这个：

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.

【讨论】：

成功了！但是我尝试添加更多按钮（它与我用于 HTML 的 navbar-btn 相同）并且它刚刚下降。帮助？向下是指更多按钮从 HTML 按钮向下移动。

【解决方案2】：

用这个<li class="navbar-btn"><a href="#">HTML</a></li>删除这个<div class="navbar-btn"><li><a href="#">HTML</a></li></div>

【讨论】：