2
どのようにレイアウトされているかを確認するためにボックスとリストをまとめ始めました。私は、ulリストをラップしていたdivが非常に不思議に並んでいることに気づいた。下のコードを公開すると、リストの箇条書きが黒い線の右側に並んでいないことがわかります。代わりに、ラインの20ピクセル前に座っている。また、リストの周りに境界線を置くとき、私は境界線も箇条書きを囲むと考えましたが、代わりに境界線の外にあります。誰かがこれを説明できますか？だから、これは他のオブジェクトとリストを並べることを非常に難しくしています。U：リストが整列していない
<!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">
#wrapper{
width:700px;
}
*{
padding: 0;
margin: 0;
}
.line {
background: #B1B1B1;
float: left;
height: 340px;
width: 1px;
}
#box{
float: left;
background:#000;
width: 200px;
height: 100px;
margin: 0 10px 0 10px;
}
#list{
float: left;
border:1px #FF0000 solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box"></div>
<div class="line"></div>
<div id="list">
<ul>
<li>enim ad minima veniam, quis nostrum</li>
<li>exercitation ullamco laboris</li>
<li>eque porro quisquam est</li>
<li>labore et dolore magnam aliquam</li>
<li>aliquid ex ea commodi consequatur</li>
<li>illum qui dolorem eum fugiat quo voluptas</li>
<li>modi tempora incidunt ut labore</li>
</ul>
</div>
</div>
</body>
</html>
ああ、わかりました。 divをlist-styleに変更しました：inside;弾丸を内側に変えます。申し訳ありません、私は自分の質問に答えました。 – Chapsterj
fyi、あなたのコードをhttp://jsfiddle.net/のリンクに入れておくと、これらのような質問がもっと簡単に返答します – Jeff
あなたの恐ろしいCSSリセットがあなたを混乱させています。 [CSSのリセットは悪い]（http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/）（ここでのポイントは、あなたが新しい賢明なデフォルトを設定するのを確実にすることです。ブラウザのものは破棄します）。 – You