0

ウェブサイトのフッターを作成しようとしています。5 行の連絡先情報、黒い背景に白いテキスト、その間に空白のテキストが含まれているはずです。したがって、基本的には、5 つの黒い帯が重なり合っており、その上に白いテキストがあるように見えます。

問題は、すべての黒いストリップが同じ長さになることです。テキストの長さとほぼ同じにしたいのですが。の代わりにリスト項目をフローティングして、<ul>それぞれの後に改行を入れてみました。背景は適切なサイズになりましたが、それらの間に空白を追加することはできませんでした。

HTML:

<ul>
                <li>Company name</li>
                <li>Adressadress 123444</li>
                <li>023311 postal code</li>
                <li>+358 12385495955</li>
                <li>info@company.com</li>
</ul>

CSS:

ul {float:left;
li {
    list-style:none;
    background-color:black;
    color:white;
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    }
    }

何か案は？

4

1 に答える 1

0

テキストの周りにスパンタグを追加すると、問題が解決するはずです。

<ul>
    <li><span>one</span></li>
    <li><span>two</span></li>
    <li><span>three</span></li>
    <li><span>four</span></li>
    <li><span>five</span></li>
</ul>​


ul {
    margin:10px;
}

ul li {
    margin-bottom:15px;
}

ul li span {
    background:black;
    padding:5px;
    color:white;
}
​

http://jsfiddle.net/uwPcv/

于 2013-01-04T10:54:05.340 に答える