我无法用最后一个元素填充其余区域。我尝试了几件事，但我看到了，但都适用于 div:一个固定的一个变量。但这是一个列表元素。这是一个简单的菜单:
<html>
<head>
<title>Cie Inc</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<style type='text/css' media='all'>
body {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
background-color : #fff;
color : #222;
min-width:1020px;
}
.extra {
position: relative;
height: 100%;
margin: 0 auto -132px ;
overflow:hidden;
display: block;
min-height : 100%;
}
.main {
width: 980px;
height: 80%;
margin: 0 auto;
padding: 0px;
font-size: 0.875em;
line-height : 1.785em;
overflow:hidden;
display: block;
}
header {
position: relative;
width: 99%;
overflow:hidden;
display: block;
}
.indent {
position: relative;
padding: 10px 0 0px;
overflow:hidden;
display: block;
}
nav{
border : solid red;
}
.menu {
position: relative;
border : solid blue;
width: auto;
margin: 0px;
padding: 0px;
background-color : #fff;
overflow:hidden;
display: block;
}
.menu li {
width : auto;
position: relative;
float: left;
background-image : url('images/menu-spacer.gif');
background-position : right top;
background-repeat : repeat-y;
overflow:hidden;
display: block;
padding-right:2px;
}
.menu li:first-child a {
width: 58px;
padding: 6px 0px 8px;
background-image : url('images/menu-home-icon.png');
background-position : center center;
background-repeat : no-repeat;
background-color : #CFCFCF;
overflow:hidden;
display: block;
text-indent:-9999px;
border-radius:9px 0px 0px 9px;
-moz-border-radius: 9px 0px 0px 9px;
-webkit-border-radius: 9px 0px 0px 9px;
}
.menu li:last-child {
line-height : 58px;
overflow:hidden;
background-image : url('none');
background-color : #cfcfcf;
border-radius: 0px 9px 9px 0px;
-moz-border-radius: 0px 9px 9px 0px;
-webkit-border-radius: 0px 9px 9px 0px;
}
.menu li a {
padding: 6px 30px 8px 30px;
color: #000;
font-size: 22px;
font-weight: 400;
text-decoration : none;
text-transform : capitalize;
line-height : 2em;
background-color : #CFCFCF;
overflow:hidden;
display: block;
letter-spacing: -1px;
}
.menu li a.active {
background-color : #B6B6B6;
overflow:hidden;
display: block;
}
.menu li a:hover {
background-color : #666;
overflow:hidden;
display: block;
cursor:pointer;
}
</style>
</head>
<body id='accueil' >
<div class="extra">
<div class="main">
<header>
<div class="indent">
<nav>
<ul class='menu'>
<li><a class='active' href='index.php?Choix=1_' >Home</a></li>
<li><a href='index.php?Choix=2_' >Who Are We</a></li>
<li><a href='index.php?Choix=3_' >Our Services</a></li>
<li><a href='index.php?Choix=4_' >Our Team</a></li>
<li><a href='index.php?Choix=7_' >Reach Us</a></li>
<li> </li>
</ul>
</nav>
</div>
</header>
</div>
</div>
</body>
</html>
最佳答案
将 float:none; 添加到 .menu li:last-child 中，它将填充其余空间。
关于html - 让一个 li 填满剩余的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29752955/