1

私は私がまとめているこの必要最低限​​のナビゲーションを持っています、そして何らかの理由で私は最初のリンクが始まる前に約40pxの左マージンを得ています。divに左マージンがないので、なぜそれが起こっているのかわかりません。もちろん、画面の左側と完全に同じ高さになるのは見栄えがよくありませんが、マージンサイズは自分で制御するのが好きです。

jsfiddleの内部にエラーがないため、これにjsfiddleを使用できませんでした。うまくレンダリングされます。

そうは言っても、これはhtmlファイルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
}
#footer_enhanced {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    line-height: 50px;
    float: left;
    background-color: #121212;
    z-index: 999;
    margin: 0px;
    left: 0px;
}
#navigation_enhanced {
    color: #000;
    margin: 0px;
    padding: 0px;
    height: 50px;
    float: left;
    clear: both;
}
#navigation_enhanced ul {
    list-style: none;
    margin: 0;
}
#navigation_enhanced li {
    float: left;
    line-height: 50px;
}
#navigation_enhanced li a {
    display: block;
    text-decoration: none;
    font-size: 1.125em;
    color: #FFF;
    margin-right: 0.375em;
    padding-right: 0.375em;
    padding-left: 0.375em;
    letter-spacing: -1px;
}
#navigation_enhanced li a:hover {
    color: #000;
    background-color: #fff;
}
.current {
    display: block;
    text-decoration: none;
    font-size: 1.125em;
    color: #000;
    background-color: #fff;
    margin-right: 0.375em;
    padding-right: 0.375em;
    padding-left: 0.375em;
    letter-spacing: -1px;
    list-style: none;
    float: left;
}
</style>
</head>
<body>
<div id="footer_enhanced">
<div id="navigation_enhanced">
<ul>
<li class="current">home</li>
<li><a href="#">cat2</a></li>
<li><a href="#">cat3</a></li>
<li><a href="#">cat4</a></li>
<li><a href="#">cat5</a></li>
</ul>
</div>
</div>
</body>
</html>
4

1 に答える 1

2

「不要な」スペースは、cssをリセット（誤って正規化としてラベル付けされている）するため、デフォルトではフィドルに存在しません。デフォルトでulはpadding-left、がありますが、jsfiddleはそれをクリアします。

ul {
    padding-left: 0;
}
于 2013-01-09T19:19:26.753 に答える