css - 带边框的段落

Question

我在页面上有段落，我想添加一个边框。

<p class="valid">paragraph</p>

CSS

p.valid {
padding:5px;
border: 1px solid #ccc;
}

问题是这将段落显示为页面的 100%

我也尝试添加内联块，它可以根据我的需要包装文本，但内联就像向左浮动。

p.valid {
padding:5px;
border: 1px solid #ccc;
display: inline-block;
}

Answer 1

当您浮动元素时，还将其设置为clear任何（左）浮动元素：

p.valid {
    padding:5px;
    border: 1px solid #ccc;
    display: inline-block;
    float: left;
    clear: left;
}

从MDN 文档：

CSS 属性指定一个元素是否可以位于其前面的clear浮动元素旁边，或者必须在其下方向下移动（清除）

Answer 2

我会使用一个<span>标签，而不是<p>因为一个段落应该延伸到整个页面，它看起来<span>会帮助你更多地完成你想要完成的事情。