0

サイトの下部にある 3 列の「ファット フッター」のスタイルを設定したいと考えています。一般的なフッター タグ (フッター全体の背景色、サイズ、配置) を正しく設定できましたが、3 つの列を適切にスタイルする方法を理解するのに少し苦労しています。ここに私のマークアップがあります:

<footer>

        <li class="column1">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Terms & Conditions</a></li>
            <li><a href="#">Sizing Chart</a></li>
            <li><a href="#">Returns & Exchanges</a></li>
            <li><a href="#">Shipping Information</a></li>
        </li>

        <ul class="column2">
            <li>###-###-####</li>
            <li>email</li>
        </ul>

        <ul class="column3">
            <div class="fb-like" data-href="fb page" data-send="true" data-layout="button_count" data-width="30" data-show-faces="false" data-font="arial"></div>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Tumblr</a></li>
        </ul>
</footer>

そして、これが私のCSSです：

footer {
letter-spacing: 0.2px;
margin-top: 20px;
margin-bottom:30px;
margin-left: -10%;
margin-right: auto;
background: #000;
color: #fff;
position: absolute;
width: 112.1%;

}

a:link,
a:visited {
color:#fff;
 text-decoration: none;
}
a:hover {
color: #999;

}

.column1 {
float: left;
position: absolute; 
max-width: 950px;
}

最後の ".column1" セットは、列のスタイルを設定する必要があると私がどのように考えているかを示すためのものです。私の主な問題は、この部分を設定する方法を理解することです（それはul.column1、#column1、.column1ですか???）。

どんな助けでも大歓迎です！ありがとう。

4

5 に答える 5

1 
<footer>

        <ul class="column column1">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Terms & Conditions</a></li>
            <li><a href="#">Sizing Chart</a></li>
            <li><a href="#">Returns & Exchanges</a></li>
            <li><a href="#">Shipping Information</a></li>
        </ul>

        <ul class="column column2">
            <li>###-###-####</li>
            <li>email</li>
        </ul>

        <ul class="column column3">
            <div class="fb-like" data-href="fb page" data-send="true" data-layout="button_count" data-width="30" data-show-faces="false" data-font="arial"></div>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Tumblr</a></li>
        </ul>
</footer>

CSS

.column { 
    float: left;
    margin: 0;
    padding: 0;
    width: 33.333%;
}

.column1 {
   /* specific styles for column 1 */
}

.column2 {
   /* specific styles for column 2 */
}

.column3 {
   /* specific styles for column 3 */
}
于 2013-01-23T16:46:58.563 に答える
0

これはうまくいくはずです。

.column1 {
 // Do styling here for column one
}

.column2 {
 // Do styling here for column two
}

.column3 {
 // Do styling here for column three
}
于 2013-01-23T16:44:56.073 に答える
0

これは役に立ちますか？各列 ( ) を 33% 幅にスタイル設定するfooter ulため、幅 100% のフッター全体に均等に配置されます。

http://jsfiddle.net/CPju5/

ライアンが言ったように、各列を個別にスタイルすることもできます.

于 2013-01-23T16:46:01.783 に答える
0

UL の代わりにcolumn1にLI を指定します。これを書きます：

<ul class="column1">
            <li><a href="#">Contact</a></li>
            ....
</ul>

これの代わりに：

<li class="column1">
                <li><a href="#">Contact</a></li>
                ....
</li>
于 2013-01-23T16:46:36.217 に答える
0

footer要素のoverflow:autocss に含まれている必要があります。

列はposition: relative.

于 2013-01-23T16:47:00.117 に答える