0

Webページに次の出力があります（黒で強調表示された領域には機密データが含まれています）。

プロバイダーのスクリーンショット

最長の行の後に常に別の空白行があることを除いて、各行は正しく表示されます。

行を表すコードは次のとおりです。

<div style="clear:both; white-space:nowrap;">
    <span style="float:left; margin-right:5px">
    <a class="provider" href="javascript:void(0)" 
        onkeypress="showProviderInfo(this, 'claim2')"
            onclick="showProviderInfo(this, 'claim2')">[+]</a>
    THE ENTRY WITH THE LONGEST NAME CAUSES AN EXTRA LINE TO DISPLAY BELOW IT...
    </span>
    <span style="float:right">
        <a href="javascript:void(0)"
        onkeypress="openAddWindowForMedicalProvider('12345678')"
        onclick="openAddWindowForMedicalProvider('12345678')">
    Create as Medical Provider
    </a>
    &nbsp;
    <a href="javascript:void(0)"
        onkeypress="openAddWindowForServiceProvider('12345678')"
        onclick="openAddWindowForServiceProvider('12345678')">
    Create as Service Provider
    </a>
    </span>
</div>
<br />

最長の線の後に余分な線が表示されないように、これをどのようにスタイル設定できますか？

4

1 に答える 1

1

これはjsfiddle.netを使用して私にとってはうまくいくようです

ただし、とは両方</ div>あり<br />ます。はdiv自動的に新しい行を取得するため、brは冗長であり、問​​題を引き起こしている可能性があります。

また、<span style="float:left; margin-right:5px">問題を引き起こしている可能性があります。フロートとマージンは、必ずしも期待どおりに機能するとは限りません。たぶん、それを変更するpadding-rightか、間隔を完全に削除して、それが機能するかどうかを確認するためにカップルを入れるとどうなるか&nbsp;を確認します。

とにかくそのスパンを左にフロートさせる必要はありません。

複数のブラウザでこれをテストすることも役立つ場合があります。ブラウザのものかもしれません。IEは、FirefoxまたはChromeで正しく機能するものを台無しにする可能性があります。

于 2012-04-10T14:54:43.193 に答える