html - 内側の div には、ラッパーに関連する不要なスペースがあります

Question

私はこれに対する解決策を見つけることができません..

ラッパー div 内に 3 列のレイアウトを作成するために、3 つの div を隣り合わせに配置しています。何らかの理由で、左のものはラッパーの境界線から 40px 離れています。左側に不要なスペースがあるだけで、他のすべては完全に機能します。

これは私のコードです..

html:

<div id="panelwrapper">
   <ul>
      <li>
         <div id="panel-left">
         </div>
      </li>

      <li>
         <div id="panel-mid">
         </div>
      </li>  

      <li>
         <div id="panel-right">
         </div>
      </li>                                    
   </ul>
</div>

CSS:

#panelwrapper   {
    height: 398px;
    width: 1023px;
    border: 1px solid black;
    clear: both;
}

#panelwrapper ul li {
    display: inline;
}

#panel-left {
    width: 339px;
    height: 396px;
    border: 1px solid red;
    float: left;
}

#panel-mid  {
    width: 339px;
    height: 396px;
    border: 1px solid blue;
    float: left;
}

#panel-right    {
    width: 339px;
    height: 396px;
    border: 1px solid green;
    float: left;
}

Answer 1

CSS リセット スタイルシートを使用していますか?

そうでない場合は、UL のマージン/パディングを 0 に設定する必要があります。