0
我有一個帶有按鈕的導航欄作爲背景圖像，當我將鼠標懸停在上面時會發生變化。但是，我似乎無法將按鈕居中。如何將NAV欄與背景圖像對齊？
nav {
padding: 10px 0 25px 0;
background-color: blue;
}
.nave {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
float: left;
}
.nav {
padding: 10px 0 25px 0;
background-color: #333;
height: 35px;
margin: 0;
border: solid;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
width: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline;
}
.btnInicio {
background-image: url("Imagenes/btnInicio.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnInicio:hover {
background-image: url("Imagenes/btnInicio_Hover.png");
}
.btnHistoria {
background-image: url("Imagenes/btnHistoria.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnHistoria:hover {
background-image: url("Imagenes/btnHistoria_Hover.png");
}
.btnLogros {
background-image: url("Imagenes/btnLogros.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnLogros:hover {
background-image: url("Imagenes/btnLogros_Hover.png");
}
.btnAct {
background-image: url("Imagenes/btnAct.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnAct:hover {
background-image: url("Imagenes/btnAct_Hover.png");
}
.btnCon {
background-image: url("Imagenes/btnCon.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnCon:hover {
background-image: url("Imagenes/btnCon_Hover.png");
}
section.main section.container {
padding: 10px 360px 20px 30px;
position: relative;
overflow: hidden;
border: solid;
}
section.content {
float: left;
width: 100%;
background-color: #FFFF00;
border: solid;
}
section.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: #fff;
border: solid;
}
section.content:after,
section.sidebar:after {
display: block;
position: absolute;
height: 100%;
background-color: #fff;
}
section.content:after {
left: 30px;
right: 360px;
}
section.sidebar:after {
right: 30px;
width: 300px;
}
section.left,
aside.right {
padding: 20px;
}
footer {
background-color: #428BCA;
float: right;
height: 35px;
width: 99.85%;
text-align: center;
font-size: 30px;
border: solid;
margin-top: 5px;
}
@media all and (max-width: 840px) {
section.main section.container {
padding: 10px 30px;
overflow: visible;
}
section.content {
float: none;
margin-bottom: 30px;
}
section.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
section.content:after,
section.sidebar:after {
display: none
}
}<nav>
<div class="nave">
<ul>
<li class="btnInicio"></li>
<li class="btnHistoria"></li>
<li class="btnLogros"></li>
<li class="btnAct"></li>
<li class="btnCon"></li>
</ul>
</div>
</nav>
<section class="main">
<section class="container">
<section class="content">
<section class="left">
</section>
</section>
<section class="sidebar">
<aside class="right">
<h2>This is a sidebar</h2>
Sign up to the newsletter!
</aside>
</section>
</section>
</section>
<footer>
</footer>
</body>
</html>代碼我已經看到了處理這件事都沒有使用背景圖片的按鈕。如果可能，我想繼續使用它們。
我不知道你的HTML結構的其餘部分，所以我最好關可以嘗試'保證金：0汽車;''在nav' – Franco
它什麼都不做。我可以發佈我的整個結構。 –
請做。所以我可以看看它。你'css'也需要一些改動，但是當你的代碼發佈時我可以更好地看到它。 – Franco