带边框的段落

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>会帮助您更好地完成所要完成的任务。