2

我有一点 CSS 问题。这发生在 IE、FF 和 Chrome 中。但是在 iPhone Safari 浏览器上，它看起来不错。问题是第二个“块”跨度标签id="myDiv"（如何删除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>

感谢您

4

2 回答 2

2

在您的 span 之后添加：

<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>

并记住：始终清除浮动！

于 2012-06-11T13:34:22.047 回答
2

确实如此，但是您的图像比图像出现的行略高，因此第二行浮动在图像的边缘。

您需要清除浮动（通过在具有样式的行之间添加一个 divclear: both或在第二个块上设置 CSS 以清除浮动）以防止这种情况发生。您也可以将第一行设置为line-height: 21px图像的高度（无论如何我建议您这样做），这样就可以解决问题，但最终您需要清除浮动以确保安全。

于 2012-06-11T13:39:07.080 回答