2012-03-12 4 views
0

У меня есть встроенный список, который я пытаюсь получить, чтобы заполнить всю ширину его div.css встроенный список полей

Если я использую margin-right в списке, последний элемент либо не достигнет конца div (потому что он имеет правильное поле), либо правый край заставит его перейти к следующей строке по мере ее превышения ширина div.

Вот пример того, что я описываю.

http://i.imgur.com/9CJx7.png

мой HTML:

<div id="footerstick" style="background:url(site_files/bg_shears.png) repeat-x; "> 
    <div id="footer_wrap"> 
     <div id="footer_top_shelf"> 
      <ul> 
       <li>Contact Us</li> 
       <li>FAQ</li> 
       <li>About Us</li> 
       <li>Distribution</li> 
      </ul> 
     </div> 
    </div> 

</div> 

мой CSS:

#footerstick { 
    position: relative; 
    margin-top: -230px; /* negative value of footer height */ 
    height: 230px; 
    clear:both; 
    } 
#footer_wrap {width:980px; margin:auto;}  
#footer_top_shelf {height:70px; overflow:hidden; } 
#footer_top_shelf ul li {display:inline; list-style:none; color:#c7c7c7; font-size:30px; margin-right:85px; line-height:75px; text-transform:uppercase; font-family:myriad pro; } 
+0

На ваш вопрос? – Madbreaks

+0

Как я могу получить первый элемент списка слева, а последний элемент - справа. Я не думаю, что хочу использовать n-й дочерний селектор, потому что это не совместимо со старыми броузерами, не так ли? – Sackling

ответ

0

Написать так:

#footer_top_shelf ul li + li{ 
    margin-left:85px; 
} 
+0

Что делает плюс? Это не работает, я просто удаляю последний элемент списка полностью. – Sackling

+0

Символ «+» - «Смежный селектор». Он имеет следующий синтаксис: E1 + E2, где E2 является объектом селектора. Селектор соответствует, если E1 и E2 используют один и тот же родительский элемент в дереве документов, а E1 сразу предшествует E2, игнорируя неэлементные узлы (например, текстовые узлы и комментарии). – ityler22

0

Попробуйте ниже CSS - после просмотра вашего изображения и, как по вашему требованию , если я получаю вашу проблему правильно, этот обновленный css должен вам помочь.

#footerstick { 
    position: relative; 
    margin-top: -230px; /* negative value of footer height */ 
    height: 230px; 
    clear:both; 
    } 
#footer_wrap {width:980px; margin:auto;}  
#footer_top_shelf {height:70px; overflow:hidden;} 

#footer_top_shelf ul 
{ 
    margin:0; 
    padding:0; 
    text-align:center; 
} 

#footer_top_shelf ul li { 
display:inline; 
list-style:none; 
color:#c7c7c7; 
font-size:30px; 
margin:0px 40px; 
line-height:75px; 
text-transform:uppercase; 
font-family:myriad pro; 
} 

Примечание: Вы можете показать свой реальный код времени, поэтому мы можем определить легко, как ваш код работает и где вы столкнулись с проблемой.

+0

это вроде нормально .. Не совсем то, что я пытался сделать. Потому что теперь есть левый край на первом элементе, перемещающем его с левой стороны и правый край на последнем элементе, перемещающем его с правой стороны. С другой стороны, это может быть хорошо, может быть, то, о чем я думал, даже не приятно. – Sackling