Question

我有一个内联列表，我试图“填充”它的div的整个宽度。

如果我在列表中使用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; }

Answer 1

像这样写：

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

Answer 2

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

注意：您能否展示实时代码，以便我们轻松识别您的代码如何工作以及您面临的问题。

css内联列表边距

2 个答案: