問題描述
內部 div 相對於包裝器具有不需要的空間 (Inner div has unwanted space in relation to wrapper)
I can't find a solution to this..
I have three divs floating next to each other to create a 3‑column lay‑out within a wrapper div. For some reason the left one is 40px away from the wrapper's border. Everything else works perfectly, just some unwanted space on the left.
This is my code..
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;
}
‑‑‑‑‑
參考解法
方法 1:
Are you using a CSS reset stylesheet?
If not, you'll need to set the UL's margin/padding to 0.
(by Attafaz、pdoherty926)