сделайте li заполнить оставшуюся ширину

-1

Я не могу заполнить остальную часть области последним элементом. Я пробую пару вещей, но я вижу, но все применимы к div: одна фиксированная одна переменная. Но это элемент списка. Это простое меню:сделайте li заполнить оставшуюся ширину

<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>

источник

2015-04-20 TotoQuébec

Вместо размещения кучу кода, пожалуйста, точно описать, в чем проблема, и что, как ожидается, – AFract

Извините за путаницу. Это код, который мне нужно исправить. Я помещаю код, потому что картинка стоит тысячи слов, и ее проще попробовать. Объяснение находится в заголовке. Сделать элемент «li» в списке заполнить оставшуюся ширину пространства, которое ему выделено. –

float:none; Добавить в .menu li:last-child и заполнит оставшуюся часть пространства.

JSFiddle

источник

2015-04-20 16:21:57 ingalion

Это работает танк вас. Это именно то, что мне нужно. –

сделайте li заполнить оставшуюся ширину

ответ

Смежные вопросы