-1

大きなフッターを作ろうとしています。リンクをインラインで表示するように最善を尽くしましたが、できません。助けてください。ありがとう

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

#footer{
    width:auto;
    height:600px;   
    background:url(footer.png);
}

#footer div{float:left; width:43.5%}
#footer div:nth-child(2n+1){clear:none}
#footer div:nth-child(3n+1){clear:left}
#footer div li a{float:none; width:auto; display:inline; font-size:1em; padding:0; line-height:1.5em; background-color:transparent}
#footer .contribute{border:none; background-color:transparent}​​​​​

#footer div h4{transition:color 0.3s;  -moz-transition:-color 0.3s; -ms-transition:color 0.3s; -o-transition:color 0.3s; -webkit-transition:color 0.3s}

#footer div:hover h4{color:#e53b2c}

#footer div:nth-child(2n){clear:left}

#footer div{width:100%; clear:both}

#footer .contribute{background-color:rgba(255,255,255,0.8); border-bottom:10px solid rgba(0,0,0,0.025); background-color: transparent;
    border: medium none;}

#footer div li {display:block; width:94.5%; float:left; font-size:0.95em; }

#footer li{padding:0.125em 0}

#footer a{border-bottom:1px solid rgba(0,0,0,0.1)}

#footer a:hover{border-bottom:1px solid rgb(65,183,216)}

#footer a:active, #footer a:focus { background-color:#e53b2c; border: none; } 

</style>
</head>
<body>
    <div id="footer">
    <div class="contribute">
        <h4>Best of Design</h4>
    <ul>
        <li><a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">Responsive Design</a></li>

    </ul>
    </div>
    <div class="contribute" >
        <h4>Best of Coding</h4>
    <ul>
        <li><a href="http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/">JavaScript &amp; jQuery</a></li>
    </ul>
    </div>
    <div id="contribute">
        <h4>Smashing Hub</h4>
        <ul>
            <li><a href="http://www.smashingmagazine.com">Smashing Magazine</a></li>

        </ul>
    </div>
    <div class="contribute">
        <h4>Other Resources</h4>
        <ul>
            <li><a href="http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/">Free Anniversary eBook</a></li>
        </ul>
    </div>           
</div>    
</body>​
</html>

これが私が作ろうとしているデザインのビジュアルです。 ここに画像の説明を入力

4

2 に答える 2

2

この問題を解決する典型的な方法は、floatプロパティを使用することです。フロートをクリアするために追加overflow: hiddenしたことに注意してください。#footer

#footer { overflow: hidden; }
.contribute {
    float: left;
    width: 25%; }

http://jsfiddle.net/Wexcode/nxvdG/

インラインの使用に固執しようとしている場合は、同様のコードを使用しますが、インライン要素のみが互いに隣り合ったときに異なる動作をします。マークアップ内の空白。つまり</div> <div>、2 つの要素の間にギャップが生じます。要素が接触するようにするには、マークアップの空白を削除する必要があります</div><div>。

.contribute {
    width: 25%;
    display: inline-block; }

http://jsfiddle.net/Wexcode/TkxKm/

于 2012-06-24T18:58:24.727 に答える
1

float: left;の代わりにこれを行うことができますdisplay: inline;。

CSSの問題は、スタイルを何度もオーバーライドすることです#footer div。

#footer div{width:100%; clear:both}

これはこれらの1つであり、レイアウトを壊す主な理由です。

スタイルの一部を削除し、リファクタリングして少しクリーンアップしてみてください。これに感謝します。

「自分のコードを理解できない場合は、休憩してリファクタリングするときが来ました。」

于 2012-06-24T19:05:26.677 に答える