ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。
以下、htmlとcssです。
html↓
<body>
<div id="newBook">
<div class="item">
<ul id="slideItems">
<li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム1</h4>
<p>コメント1</p>
</li>
<li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム2</h4>
<p>コメント2</p>
</li>
<li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム3</h4>
<p>コメント3</p>
</li>
<li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム4</h4>
<p>コメント1</p>
</li>
<li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム5</h4>
<p>コメント1</p>
</li>
<!--2ページ-->
<li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム1</h4>
<p>コメント1</p>
</li>
<li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム2</h4>
<p>コメント2</p>
</li>
<li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム3</h4>
<p>コメント3</p>
</li>
<li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム4</h4>
<p>コメント1</p>
</li>
<li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム5</h4>
<p>コメント1</p>
</li>
<!--3ページ-->
<li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム1</h4>
<p>コメント1</p>
</li>
<li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム2</h4>
<p>コメント2</p>
</li>
<li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム3</h4>
<p>コメント3</p>
</li>
<li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム4</h4>
<p>コメント1</p>
</li>
<li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" />
<h4>サンプルアイテム5</h4>
<p>コメント1</p>
</li>
</ul>
</div>
<div class="leftBtn">
<a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div>
<div class="rightBtn">
<a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div>
</div>
</body>
css↓
#newBook {
margin: 30px;
position: relative;
}
.item {
height: 115px;
width: 500px;
padding: 10px 0px;
overflow: hidden;
position: absolute;
left: 40px;
top: 0px;
}
.leftBtn,.rightBtn {
text-align: left;
width: 40px;
position: absolute;
top: 0px;
}
.leftBtn {
text-align: left;
left: 0px;
}
.rightBtn {
text-align: right;
left: 540px;
}
.item ul {
width: 1500px;
position: absolute;
left: 0px;
top: 0px;
}
.item li {
background-color: #999999;
height: 100px;
width: 100px;
list-style-type: none;
padding: 10px 0px 5px;
float: left;
text-align: center;
}
#slideItems {
position: absolute;
left: 0px;
top: 0px;
}
お礼
回答ありがとうございますm(_)m ずっと気になっていたんで… ありがとうございました！