css内联列表边距

我有一个内联列表，我试图去“填充”它的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; }

来源

2012-03-12 Sackling

你的问题是什么？ – Madbreaks 2012-03-12 04:02:01

如何让第一个列表元素完全位于左侧，最后一个元素位于右侧。我不认为我想要使用第n个孩子选择器，因为它不与旧版的broswers兼容吗？ – Sackling 2012-03-12 04:23:56

这样写：

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

来源

2012-03-12 04:02:02 sandeep

加号是做什么的？这似乎并不奏效我只是将最后一个列表元素全部删除。 – Sackling 2012-03-12 04:26:02

'+'符号是“邻接兄弟选择器”它具有以下语法：E1 + E2，其中E2是选择器的主题。如果E1和E2在文档树中共享同一个父节点，并且E1紧接在E2之前，则选择器匹配，忽略非元素节点（如文本节点和注释）。 – ityler22 2012-03-12 05:38:18

尝试下面的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; 
}

注意：您可以显示你的实时代码，所以我们可以很容易地找出如何你的代码工作，在那里你所面临的问题。

来源

2012-03-12 05:43:00 w3uiguru

这是很好..不完全是我试图完成。因为第一个元素上有一个左边距，将其从左侧移开，最后一个元素的右边距将其从右侧移开。另一方面，这可能是好的，也许我想的不是很好看.. – Sackling 2012-03-12 14:00:58

css内联列表边距

回答

相关问题