将显示块应用于：悬停已满

时间：2017-03-16 14:47:13

标签： html css nav

我正在尝试在我的nav li元素中悬停时创建一个背景颜色更改的菜单，但它不能很好地工作，它没有覆盖黄色到边框的所有宽度，我试过了使用left:0但没有。

特别是第一个和最后一个li未覆盖元素的所有宽度。 

.nav{
	background-color:rgb(214, 19, 25);
	background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	background:-moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	background:-o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	border: 2px solid rgb(130, 0, 0);
	border-radius:10px;
	width:943px;
	float:left;
	margin:0 auto;
	padding:0;
	position:relative;
	z-index:1
}
.nav ul{
	margin:0;
	display:block;
}

.nav ul li{
	display:inline-block;
	padding:10px 30px;
	font-family:"Kratos True Type";
	font-size:24px;
	border-right:3px solid rgb(101,0,3);
	margin:0;
}
.nav ul li a{
	color:rgba(255, 255, 255, 1);

}
.nav ul .firstnav{
	padding-left:0;
}
.nav ul .lastnav{
	border-right:0;
}
.nav ul li a{
	text-decoration:none;
}
.nav ul li:hover{
	background:rgba(255, 186, 0, 1);
}
<nav class="nav">
  <ul>
	  <li class="firstnav"><a href="">HOME</a></li>
		<li><a href="">DAFTAR</a></li>
		<li><a href="">PANDUAN</a></li>
		<li><a href="">DATA PRIBADI</a></li>
		<li class="lastnav"><a href="">DATA BUKU</a></li>
	</ul>
</nav>

3 个答案:

答案 0 :(得分：1)

黄色背景未覆盖所有内容的原因是因为无序列表（ul）有一个未重置的填充（read more about reseting with css here）

我稍微改变了你的代码：

.nav {
  background-color: rgb(214, 19, 25);
  background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: -moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: -o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
  border: 2px solid rgb(130, 0, 0);
  border-radius: 10px;
  float: left;
  margin: 0 auto;
width:880px;
  padding: 0;
  position: relative;
  z-index: 1
}

.nav ul {
  margin: 0;
  display: block;
  padding: 0;
}

.nav ul li {
  display: inline-block;
  padding: 10px 30px;
  font-family: "Kratos True Type";
  font-size: 24px;
  border-right: 3px solid rgb(101, 0, 3);
  margin: 0;
}

.nav ul li a {
  color: rgba(255, 255, 255, 1);
}

.nav ul .firstnav {
  padding-left: 0;
}

.nav ul .lastnav {
  border-right: 0;
}

.nav ul li a {
  text-decoration: none;
}

.nav ul li:hover {
  background: rgba(255, 186, 0, 1);
}
<nav class="nav">
  <ul>
    <li class="firstnav"><a href="">HOME</a></li>
    <li><a href="">DAFTAR</a></li>
    <li><a href="">PANDUAN</a></li>
    <li><a href="">DATA PRIBADI</a></li>
    <li class="lastnav"><a href="">DATA BUKU</a></li>
  </ul>
</nav>

答案 1 :(得分：0)

试试这个。我刚刚对你的代码做了一些修改。

.nav{
	background-color:rgb(214, 19, 25);
	background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	background:-moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	background:-o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	background:linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11));
	border: 2px solid rgb(130, 0, 0);
	border-radius:10px;
	width:auto;
	float:left;
	margin:0 auto;
	padding:0;
	position:relative;
	z-index:1
}
.nav ul{
	margin:0;
  padding: 0;
	display:block;
}

.nav ul li{
	display:inline-block;
	padding: 0;
	font-family:"Kratos True Type";
	font-size:24px;
	border-right:3px solid rgb(101,0,3);
	margin:0;
  float: left;
}
.nav ul li a{
	color:rgba(255, 255, 255, 1);
  padding: 10px 20px;
  display: block;

}
.nav ul .firstnav{
	padding-left:0;
}
.nav ul .lastnav{
	border-right:0;
}
.nav ul li a{
	text-decoration:none;
}
.nav ul li:hover{
	background:rgba(255, 186, 0, 1);
}

.nav ul .firstnav{
	border-radius: 10px 0 0 10px;
}
.nav ul .lastnav{
	border-radius: 0 10px 10px 0;
}
<nav class="nav">
  <ul>
	  <li class="firstnav"><a href="">HOME</a></li>
		<li><a href="">DAFTAR</a></li>
		<li><a href="">PANDUAN</a></li>
		<li><a href="">DATA PRIBADI</a></li>
		<li class="lastnav"><a href="">DATA BUKU</a></li>
	</ul>
</nav>

答案 2 :(得分：0)

我建议使用flexbox（请注意，我将5px nav width缩减为padding，并向nav ul li增加了一点.nav { background-color: rgb(214, 19, 25); background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11)); background: -moz-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11)); background: -o-linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11)); background: linear-gradient(rgb(215, 19, 25), rgb(163, 6, 11)); border: 2px solid rgb(130, 0, 0); border-radius: 10px; width: 938px; /*float: left;*/ display: flex; margin: 0 auto; padding: 0; position: relative; z-index: 1 } .nav ul { margin: 0; padding: 0; display: flex; flex-flow: row wrap; justify-content: center; } .nav ul li { display: flex; padding: 10px 36px; /*font-family:"Kratos True Type";*/ font-size: 24px; border-right: 3px solid rgb(101, 0, 3); margin: 0; } .nav ul li a { color: rgba(255, 255, 255, 1); } .nav ul .firstnav { padding-left: 30px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin: 0; } .nav ul .lastnav { border-right: 0; padding-right: 30px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin: 0; } .nav ul li a { text-decoration: none; } .nav ul li:hover { background: rgba(255, 186, 0, 1); margin: 0; }以完全适应悬停背景）：

<nav class="nav">
  <ul>
    <li class="firstnav"><a href="">HOME</a></li>
    <li><a href="">DAFTAR</a></li>
    <li><a href="">PANDUAN</a></li>
    <li><a href="">DATA PRIBADI</a></li>
    <li class="lastnav"><a href="">DATA BUKU</a></li>
  </ul>
</nav>
[0]: Line to show.
[0]: Line to show.[1]: Line to show. 
[0]: Line to show.[1]: Line to show.[2]: Line to show.
[0]: Line to show.[1]: Line to show.[2]: Line to show.[3]: Line to show.
[0]: Line to show.[1]: Line to show.[2]: Line to show.[3]: Line to show.[4]: Line to show.

[0]: Line to show.[1]: Line to show.[2]: Line to show.[3]: Line to show.[4]: Line to show.Array
(
    [0] => [0]: Line to show.
    [1] => 
    [2] => 
    [3] => [1]: Line to show.
    [4] => 
    [5] => 
    [6] => [2]: Line to show.
    [7] => 
    [8] => 
    [9] => [3]: Line to show.
    [10] => 
    [11] => 
    [12] => [4]: Line to show.
    [13] => 
    [14] => 
)

相关问题
最新问题