0

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

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

部分（#内容）

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. 希望大家能帮忙！

4

2 回答 2

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

请注意使用 ofnav而不是第二个section（语义上）。nav接下来，我将通过将using居中来清理并解决“居中”链接的问题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: centeron#footer-links a 实际上以内容为中心。在这里观察很重要。

另请注意，我确实使用display: inline-block了 within on #footer-links a，然后允许我设置一个已定义的margin而不是继承1px dotted间隙上的下划线。但是，IE7 和更低版本不支持display: inline-block，如果需要，您应该先检查它的外观。就个人而言，我会担心太多，除非你真的需要支持 IE7 和（畏缩）IE6。

于 2012-12-05T03:40:47.253 回答
1

我认为你可以消除所有这些 ids/classes，并且只针对元素inline-block

http://jsfiddle.net/qwM6z/

于 2012-12-05T03:55:32.850 回答