css - CSS フッター列が正しく表示されない

Question

私はcssが初めてで、立ち往生していて、何が間違っているのかわかりません。でも、フットショーは3列にしたいです。画像のレイアウトを見て、フッターに 3 つの列があることに気付いたら、それを実現しようとしています。また、フッターの点線がレイアウトを超えて表示されます。

ここに私のレイアウトがあります: http://gdisinc.com/barker/images/menubar/layout_barker.jpg

ここに作業サイトがあります: http://www.gdisinc.com/barker/default.php#

それを修正するために私がしなければならないことを教えていただけますか。ご不明な点がございましたら、お知らせください。

Answer 1

2つのソリューション

コンテンツの幅を広げる

.content {
  width: 903px; 
}

またはコンテンツの最後のulの境界線を削除します

.content ul:last-child {
  border-right: 0;
}

Answer 2

このCSSを追加

.content {
    padding:20px 0;
}

#footer ul {
  margin: 0 0 0 20px;
  width: 275px;
  height:120px;
}

また、最後にクラスをul追加し、これを追加します

.last {
   border:none;
}

Emrahの提案に従ってこれを行う方がよい

.content ul:last-child {
  border-right: 0;
}

Answer 3

3 番目<ul>がダウンする理由は、余分な 1px の境界線 ( border-right: 1px dotted #FFFFFF;) があるためです。

あなたがそれをした方法は、900pxのコンテナを持ち、それを3列に分割することでした. そのとおりです。しかし、extra を追加するborder-right: 1px dotted #FFFFFF;と、列幅は 301px (幅 300px + 境界線 1px = 301px ) になります。

これを解決するには、コンテナのサイズを 903px に変更します。または、幅のサイズを 299px に縮小します。

---

についての他の問題

フッターの点線がレイアウトを超えて表示されます。

注意してくださいpadding。div 内にパディングを追加する場合。余分な幅としてカウントされます。

CSS の一部<ul>は次のとおりです。

    width:902px;
    padding:20px;

全体の幅は です。902px (width) + 20px (left padding) + 20px (right padding) = **942px**

これを修正するには、を使用して を変更paddingします。最初の値は上下のパディングを表し、2 番目の値は左右のパディングを表します。<ul>padding:20px 0px;

Answer 4

列が親に十分に収まりません。style="border:none;"最後の列に設定します。