2

CSSに少し問題があります。これは、IE、FF、および Chrome で発生します。ただし、iPhone Safari ブラウザでは問題なく表示されます。問題は、2 番目の「ブロック」スパン タグ ( 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

これをスパンの後に追加します：

<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

それはできますが、画像は画像が表示される線よりもわずかに高いため、2 番目の線は画像の余白に対して浮いています。

clear: bothこれが起こらないようにするには、フロートをクリアする必要があります (スタイルを使用して行間に div を追加するか、2 番目のブロックに CSS を設定してフロートをクリアします)。また、最初の行をline-height: 21px、画像の高さ (とにかくそうすることをお勧めします) に設定することもできます。

于 2012-06-11T13:39:07.080 に答える