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;

セクション（#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;

a

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

これらのID/クラスをすべて削除し、次の要素をターゲットにすることができると思います。inline-block

http://jsfiddle.net/qwM6z/

于 2012-12-05T03:55:32.850 に答える
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次に、 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 は実際にコンテンツを中央に配置します。ここで観察することが重要です。

また、 on内で使用していることに注意してください。これにより、定義済みを設定し、ギャップにアンダースコアを継承しないようにすることができます。ただし、IE7以下はサポートされていないため、最初にそれがどのように見えるかが必要かどうかを確認する必要があります。個人的には、IE7と（ cringe）IE6を本当にサポートする必要がない限り、私はそれについてあまり心配します。display: inline-block#footer-links amargin1px dotteddisplay: inline-block

于 2012-12-05T03:40:47.253 に答える