带边框的段落

Question

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

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

CSS

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

问题是这会将paragrph显示为页面的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 documentation：

  

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

Answer 2

我会使用<span>标记而不是<p>，因为段落应该扩展到整个页面，看起来<span>会帮助您更多地了解您的内容试图完成。