0

这是我正在使用的 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; 试图修复它。

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

4

2 回答 2

2

试试这个：

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;
}

演示。

于 2013-07-13T12:23:16.740 回答
0

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

于 2013-07-13T12:34:08.310 回答