使用CSS的文本边框

时间:2016-09-24 23:47:07

标签: html css

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

enter image description here

这是我用过的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;
}

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

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:3)

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



.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;
}

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

答案 1 :(得分:0)

您可以尝试将文本包装在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);
}