Question

我无法弄清楚，为什么文本有一个边距而且不适合框：

这是我的HTML的摘录（请看一下小提琴）：

<!-- my Box -->
<div style="margin-bottom:50px">
<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;">
<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;"><b>Vitamine:</b></div>
<div style="width:300px; height:300px;float:left;margin-left:7px">
<a href="">
 » <u>Biotin </u>
 </a></br>
 <a href="">
 » <u>Vitamin A</u>
 </a></br>


 </div>
 </div>
 </div>

谢谢！

Answer 1

http://jsfiddle.net/SSLZR/2/

添加display：inline-block;你kasten div的风格：

<div id="kasten" style="width: 600px; display:inline-block;height: 200px;background-color:#f0f0f0;">

Answer 2

左边会有一个简单的浮点数：

<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;float:left;">

http://jsfiddle.net/SSLZR/1/

Answer 3

试图删除一些你的风格。使用更少的代码。

<body>

<!-- Vitamine -->
<div style="margin-bottom:50px">
<div id="kasten" style="width: 600px; height: 200px;background-color:#f0f0f0;">
<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;"><b>Vitamine:</b></div>
<div style="width:300px; height:300px;float:left;margin-left:7px">
<a href="">
» <u>Biotin </u>
</a><br>
<a href="">
» <u>Vitamin A</u>
</a><br>
<a href="">
» <u>Vitamin B12</u>
</a><br>
<a href="">
» <u>Vitamin B6 </u>
</a><br>
<a href="">
» <u>Vitamin D </u>
</a><br>
<a href="">
» <u>Vitamin K</u>
</a><br>


</div>
<div style="width:286px; height:300px;float:left;">
<a href="">
» <u>Niacin </u>
</a><br>
<a href="">
» <u>Vitamin B1 </u>
</a><br>
<a href="">
» <u>Vitamin B2 </u>
</a><br>
<a href="">
» <u>Vitamin C </u>
</a><br>
<a href="">
» <u>Vitamin E </u>
</a><br>

</div>

</div>
</div>






<!-- Mineralstoffe -->

<div id="kasten" style=" background-color:#f0f0f0;float: left;">

<div style="margin-bottom:5px;margin-left:7px;padding-top:7px;top:0"><b>Mineralstoffe:</b></div>
<div style="width:300px; float:left;margin-left:7px;">
<a href="">
» <u>Calcium </u>
</a><br>
<a href="">
» <u>Eisen </u>
</a><br>
<a href="">
» <u>Kalium</u>
</a><br>
<a href="">
» <u>Magnesium </u>
</a><br>
<a href="">
» <u>Natrium </u>
</a><br>
<a href="">
» <u>Schwefel </u>
</a><br>
<a href="">
» <u>Zink </u>
</a><br>

</div>
<div style="width: 191px; float:left;">
<a href="">
» <u>Chlor </u>
</a><br>
<a href="">
» <u>Fluor </u>
</a><br>
<a href="">
» <u>Kupfer </u>
</a><br>
<a href="">
» <u>Mangan </u>
</a><br>
<a href="">
» <u>Phosphor </u>
</a><br>
<a href="">
» <u>Selen </u>
</a><br>
</div>


</div>










</body>

div中文本的奇怪填充/边距

3 个答案: