Question

我有一点CSS问题。这发生在IE，FF和Chrome中。但是在iPhone Safari浏览器上，它看起来很好。问题是第二个“块”span标记（id="myDiv"）不会像第一个块span标记那样向左浮动，它在某种类型的左边有一个填充，我从未应用过。如何删除id="myDiv" span标记左侧的填充？

<head>
 <style>
    .plansHeader{
      font-weight:bold;color:rgb(73,102,145);font-size:12pt;margin-bottom:6px;line-  
      height:14pt;
     }
 </style>
</head>
<body>
  <span style="display: block">
    <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
    <span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span> 
  </span>
  <span id="myDiv" style="display: block">
    <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
    <span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
  </span>           
</body>

谢谢你

Answer 1

在你的跨度之后添加：

<div style="clear:both;"></div>

它应该是这样的：

<span style="display: block">
   <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
   <span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span> 
   <div style="clear:both;"></div>
</span>

<span id="myDiv" style="display: block">
  <img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
  <span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
  <div style="clear:both;"></div>
</span>

并记住：始终清除花车！

Answer 2

确实如此，但您的图像略高于图像所在的线条，因此第二行浮动在图像边缘。

你需要清除浮点数（通过在clear: both样式的行之间添加div或在第二个块上设置CSS来清除浮点数）以防止这种情况发生。您也可以将第一行设置为line-height: 21px，即图像的高度（我建议您不要这样做），然后修复它，但最终您需要清除浮点数安全

正如所告诉的那样，元素不会向左浮动

2 个答案: