使用CSS的文本边框

Question

我想在文本超链接周围创建一个精美的边框。然而，我创建的框似乎是将文本推到右下方。见下图：

这是我用过的CSS：

div.box {     
    border: solid 1px #333333;
    padding: 0px 5px 0px 5px;
    margin: 0px 5px 0px 5px;
    transition: 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    float:left;
}

我认为它可能与行间距有关，但框似乎跟随行间距的高度。

任何帮助将不胜感激！

Answer 1

边框位于元素的外部，使该元素略大于周围的文本，float：left导致文本的浮动，但由于高度问题导致在框的末尾。如果你删除浮动 - 它将正确布局。请注意，我刚刚创建了一大段文本，并将框类交换到了span。你甚至不需要添加盒子类 - 你可以用CSS选择器特异性来完成 - 在这种情况下...... p span {...} ...会定位正确的元素。

＆＃13;

＆＃13;

.box {     
    border: solid 1px #333333;
    padding: 0px 5px 0px 5px;
    margin: 0px 5px 0px 5px;
    transition: 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

＆＃13;

<p>This is a long line of <span class="box">text</span> that will break to two lines and will allow the demonstration of the box around the text within each of the spans. Each <span class="box">span</span> will have a border around the text to show the desired effect.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试将文本包装在span标记内，并添加以下CSS：

span.box {
    display: inline-block;
    -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
}