中心SECTION设置为内联块？

Question

我有一个像这样定义的部分：

<footer>
    <section id="content">
        <section id="footer-links" class="center">
            <a href="index.php" class="float-left">Home</a>
            <a href="about.html" class="float-left">About</a>
            <a href="contact.html" class="float-left">Contact</a>
            <a href="terms.html" class="float-left">Terms and Conditions</a>
        </section>
    </section>
</footer>

我已经应用了以下CSS：

页脚

background-color: 
rgb(53, 53, 181);
color: 
rgb(255, 255, 255);
display: block;
font-size: 16px;
height: 100px;
width: 1424px;

部分（#content）

background-color: 
rgba(0, 0, 0, 0);
color: 
rgb(255, 255, 255);
display: block;
font-size: 16px;
height: 19px;
margin-bottom: 0px;
margin-left: 312px;
margin-right: 312px;
margin-top: 0px;
position: relative;
width: 800px;

部分（＃footer-links）

background-color: 
rgba(0, 0, 0, 0);
color: 
rgb(255, 255, 255);
display: inline-block;
font-size: 16px;
height: 19px;
margin-left: 0px;
margin-right: 0px;
width: 332px;

一

background-color: 
rgba(0, 0, 0, 0);
border-bottom-color: 
rgb(222, 222, 222);
border-bottom-style: dotted;
border-bottom-width: 1px;
color: 
rgb(222, 222, 222);
cursor: auto;
display: block;
float: left;
font-size: 16px;
height: 18px;
margin-right: 16px;
text-decoration: none;
width: 39px;

但是，正如您所看到的，它与section保持一致。希望你们都能提供帮助！

Answer 1

display: inline-block的这种特殊用法可能不是你所追求的（我认为float: left部分也可能是错误的方法。例如：

<footer>
    <section id="content">
        <nav id="footer-links" class="center">   
            <a href="index.php" class="float-left">Home</a>
            <a href="about.html" class="float-left">About</a>
            <a href="contact.html" class="float-left">Contact</a>
            <a href="terms.html" class="float-left">Terms and Conditions</a>
        </nav>
    </section>
</footer>​

请注意使用nav而不是第二个section（语义上）。接下来，我将通过使用nav将margin: 0 auto置于中心来清理并解决“居中”链接的问题。您需要父width 和 #content上的nav：

html, /* This part allows me to set margin: 0 auto; on footer. */
body {
    width: 100%;
    margin: 0;
    padding: 0;
}
footer {
    background-color: rgb(53, 53, 181);
    color: rgb(255, 255, 255);
    display: block;
    font-size: 16px;
    height: 100px;
    width: 600px; /* Note this line. */
    padding: 10px;
    margin: 0 auto; /* Note this line. */
}
#content {
    background-color: rgba(0, 0, 0, 0);
    color: rgb(255, 255, 255);
    font-size: 16px;
    height: 19px;
    margin-bottom: 0;
    width: 600px; /* The same width as footer. Keep that in mind. */
}
#footer-links {
    background-color: rgba(0, 0, 0, 0);
    color: rgb(255, 255, 255);
    font-size: 16px;
    height: 19px;
    margin: 0 auto;
    width: 400px; /* 200px less than #content and footer */
    text-align: center; /* HINT! This actually centers the text. */
    font-size: 16px;
}
#footer-links a {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px dotted rgb(222, 222, 222);
    color: rgb(222, 222, 222);
    cursor: auto;
    text-decoration: none;
    height: 18px;
    display: inline-block; /* So the next line will work.  */
    margin: 0 8px;
}​

http://jsfiddle.net/3Kk2L/3/

现在，text-align: center 上的#footer-links a实际上是内容的中心。这一点很重要。

还要注意我 在display: inline-block内使用#footer-links a，这样我就可以设置定义的margin而不是继承差距的1px dotted下划线。 然而，IE7及更低版本不支持display: inline-block，您应首先检查是否需要它的外观。就个人而言，我会担心它太多，除非你真的需要支持IE7和（ cringe ）IE6。

Answer 2

我认为您可以删除所有这些ID /类，并使用inline-block

定位元素

http://jsfiddle.net/qwM6z/