2013-01-04 39 views
0
<style> 
#firstname 
{ 
border: 2px solid #3b5998; 
padding: 10px 40px; 
width: 100px; 
background: #daf0ff; 

} 
</style> 
</head> 
<body> 

<p id="firstname">This is a box,This is a box,This is a box,This is a box,This is a box, </p><p id="firstname">This is a box,This is a box,This is a box,This is a box,This is a box,</p> 

在bowser上查看它后,它显示不同行的框....如何将它们放在同一行?连续两个圆角边框?

+0

你能与我们分享你已经尝试什么,到目前为止研究?(请注意,您可以编辑您的问题以添加详细信息等) – Jeroen

回答

1

在您的<p />标签上使用float: leftdisplay: inline-block

说明:
您使用此块元素(<p />)。除非你漂浮它们,它们总是会强制换行。你可以使用内联元素(如<span/>并排显示他们一边,但会打破padding。因此,无论float他们或我们的混合动力display: inline-block

+0

感谢您的快速响应 – user1949991

+0

很高兴它有所帮助。在解决问题后接受答案是一种很好的做法 – Horen