Question

此CSS和HTML显示了三个文本框，当在IE和Edge中查看时，三个文本框完全包裹在其边框中。在Chrome（或Android浏览器）中查看时，边框的右侧被剪掉。

我可以通过在每个跨度上添加一个尾随的“”来使其工作，但我宁愿了解自己是否做错了事。

<html>
<body>
<style>
.link-bubble {
    float:none;
    white-space:nowrap;
    border: thin solid blue;
    border-radius:10px;
    background-color:antiquewhite;
    padding:4px 6px 6px 6px;
    margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
    <span class="link-bubble">
        <a href="/Services/target1">First service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target2">Second service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target3">Third service offered</a>
    </span>
</div>
</body>
</html>

Answer 1

我不确定100％为什么会发生这种特定行为以及浏览器之间的差异，但是我敢打赌它与white-space:nowrap和父元素width: 30%有关，并且有些古怪

与其尝试解决该问题，不如尝试解决此问题，更简单的方法是将display中的.link-bubble从inline更改为block。您可以使用类上的display: block来执行此操作，或者仅将元素从span更改为div或其他块元素。 Here's some good reading on the box model-我还建议您阅读CSS Flexbox和网格，这是一种更轻松，更现代的处理元素与div和float定位的方法。

此外，如果您确实需要white-space: nowrap，请将该样式添加到内部元素中。参见下面的示例。

<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}

.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
    <span class="link-bubble">
        <a href="/Services/target1">First service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target2">Second service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target3">Third service offered</a>
    </span>
</div>
</body>
</html>

边框在Chrome中被剪除，但IE或Edge中未剪裁

1 个答案: