额外线显示在最长线之后

Question

我在网页中有以下输出（黑色突出显示区域包含敏感数据）：

每条线都正确显示，但最长的线后面总是有另一条空行。

这是代表一行的代码：

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

我如何设计这样的样式，使额外的线条在最长的线条之后不显示？

Answer 1

这似乎对我使用jsfiddle.net

很好

但是，您都有</ div>和<br />。 div自动获取新行，因此br是多余的，可能会导致您的问题。

此外，<span style="float:left; margin-right:5px">可能会导致问题。浮点数和边距并不总能达到预期效果。也许可以将其更改为padding-right或查看如果您完全删除间距会发生什么，只需添加一对 即可查看是否有效。

你无论如何都不需要漂浮那个范围。

在多个浏览器中测试它也可能会有所帮助。它可能是一个浏览器的东西。 IE可能会搞砸在Firefox或Chrome中正常运行的东西。