Question

这是我正在使用的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看看它是怎么样的，我不知道如何解决它，我试着把位置：相对;试图解决它。

顶部，边距底部只是让它上升一点，我希望它适合导航栏。有人可以帮忙吗？

Answer 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.

Answer 2

使用此<div class="navbar-btn"><li><a href="#">HTML</a></li></div>

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

按钮不会进入导航栏

2 个答案: