Question

我无法用最后一个元素填充区域的其余部分。我尝试了几件事，但我看到但是所有都适用于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>&nbsp;</li>
           </ul>
          </nav>
        </div>
      </header>
    </div>
  </div>
</body>
</html>

Answer 1

将float:none;添加到.menu li:last-child，它将填充余下的空间。

JSFiddle

让李填满剩余的宽度

1 个答案: