html - 最长行后显示额外行

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">可能会导致问题。 float 和边距并不总是如您所愿。也许将其更改为 padding-right或者看看如果你完全删除间距并只放入一对   会发生什么看看是否有效。

无论如何，您都不需要 float 该跨度。

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