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 に答える