1
私はw3schoolsの4桁のフッターに触発されたウェブサイトのフッターを作成しようとしていますが、li
タグのテキストは見出しと比べて少し右に移動します。リストをテキストの中央に配置する方法は?
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
#footer {
width: 100%;
margin: auto;
}
.footerFloat {
width: 100%;
}
@media all and (min-width: 950px) {
#footer {
width: 980px;
margin: auto;
}
.footerFloat {
width: 25%;
float: left;
display: block;
}
}
#wrapper {
width: 100%;
overflow: hidden;
}
ul {
list-style: none;
}
.center {
text-align: center;
}
HTML:ここ
<header></header>
<footer>
<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4 class="center">Header 1</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 4</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 3</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4 class="center">Header 4</h4>
<ul>
<li class="center">Line 1</li>
<li class="center">Line 2</li>
<li class="center">Line 3</li>
<li class="center">Line 4</li>
</ul>
</div>
</div>
</div>
</footer>
が問題のpictureです。
私はこれをどのように修正でき、フッターの見出しにテキストの中心を置くことができますか?
ご協力いただきありがとうございます。
は、デフォルトではul
に内蔵されているパディングを削除
あなたは、問題の画像を提供することができますか? – kabaehr
[unordered list内のli要素内の[Center Text]の重複の可能性あり(http://stackoverflow.com/questions/5147830/center-text-inside-an-li-element-inside-an-unordered-list) – TylerH
ULリストの埋め込みをゼロにするだけで済みます。 –