如果您测试此代码并调整浏览器窗口的大小，则最后一个列表项在悬停时“注册”(这是唯一的方法来判断)它没有拉伸(stretch) 100%。我尝试了很多不同的方法。如果有人可以测试并找到解决方案；请解释一下你是如何解决的，这样我可以学习。请。
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: rgba(182, 182, 182, 1);
}
div.main_container {
position: fixed;
height: 100%;
width: 100%;
background-image: url("../images/IMG_0060.JPG");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
div.nav_container {
position: fixed;
z-index: 1;
height: 50px;
width: 100%;
min-width: 700px;
background-color: rgba(34, 34, 34, .75);
}
ul.nav {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
width: 100%;
}
ul.nav li {
background-color: transparent;
display: table;
float: left;
height: 50px;
width: 12.5%;
text-align: center;
}
ul.nav li marquee {
position: relative;
display: table-cell;
vertical-align: middle;
color: white;
font-weight: bold;
font-family: fantasy;
}
ul.nav li a {
text-decoration: none;
text-transform: capitalize;
font-family: fantasy;
position: relative;
display: table-cell;
vertical-align: middle;
color: lightgray;
font-weight: bold;
}
ul.nav li:hover {
background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
background-color: black;
color: lightgreen;
}
ul.nav li:hover a {
color: black;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Kendall's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="main_container">
<div class="nav_container">
<ul class="nav">
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">kendall</a>
</li>
<li>
<a href="#">projects</a>
</li>
<li>
<a href="#">social</a>
</li>
<li>
<a href="#">tutorials</a>
</li>
<li>
<marquee scrollamount="2">
some sliding text
</marquee>
</li>
<li>
<a href="#">login</a>
</li>
<li>
<a href="#">sign up</a>
</li>
</ul>
<!--Closing of the nav-->
</div>
<!--Closing of the nav_container-->
</div>
<!--Closing of the main_container-->
</body>
</html>最佳答案
您可以将ul.nav li的last-child更改为float:right
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: rgba(182, 182, 182, 1);
}
div.main_container {
position: fixed;
height: 100%;
width: 100%;
background-image: url("../images/IMG_0060.JPG");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
div.nav_container {
position: fixed;
z-index: 1;
height: 50px;
width: 100%;
min-width: 700px;
background-color: rgba(34, 34, 34, .75);
}
ul.nav {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 100%;
width: 100%;
}
ul.nav li {
background-color: transparent;
display: table;
float: left;
height: 50px;
width: 12.5%;
text-align: center;
}
ul.nav li:last-child {
float:right;
}
ul.nav li marquee {
position: relative;
display: table-cell;
vertical-align: middle;
color: white;
font-weight: bold;
font-family: fantasy;
}
ul.nav li a {
text-decoration: none;
text-transform: capitalize;
font-family: fantasy;
position: relative;
display: table-cell;
vertical-align: middle;
color: lightgray;
font-weight: bold;
}
ul.nav li:hover {
background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
background-color: black;
color: lightgreen;
}
ul.nav li:hover a {
color: black;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Kendall's Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="main_container">
<div class="nav_container">
<ul class="nav">
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">kendall</a>
</li>
<li>
<a href="#">projects</a>
</li>
<li>
<a href="#">social</a>
</li>
<li>
<a href="#">tutorials</a>
</li>
<li>
<marquee scrollamount="2">
some sliding text
</marquee>
</li>
<li>
<a href="#">login</a>
</li>
<li>
<a href="#">sign up</a>
</li>
</ul>
<!--Closing of the nav-->
</div>
<!--Closing of the nav_container-->
</div>
<!--Closing of the main_container-->
</body>
</html>关于html - 为什么我的导航相对于浏览器的宽度不是 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36056047/