Question

我的问题是，如何避免将文字放在新行上？

我的代码：

<html>
<body>
<p >Seating availability.</p>
<p ><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div> There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>
</body>
</html>

我该如何编码？

Answer 1

将display：inline-block添加到div

<html>
 <head>
  <style>
   div
   {
     display: inline-block;
   }
</style>
</head>
<body>
<p >Seating availability.</p>
<p><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div>There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>
</body>
</html>

Answer 2

有很多display属性可用：

尝试使用display:inline-block;

div style="width: 10px; height: 10px; background-color: green; border: 0px;display:inline-block;" ></div>

希望这有帮助！

fiddle-Demo

删除<p></p>代码只需使用<div>，因为<p>始终占用新行。

Updated Fiddle

Answer 3

使用span代替div并添加（display：inline-block;）段落（p）不能包含（div）但可以包含（span）＆＃39; 座位可用性。

有座位。

可用座位正在减少。

不到15％的座位。

没有座位。

＆＃39;

Answer 4

将此代码放入css文件

div {
    margin: 5px 10px 0 0 ;
    float:left;
}

FIDDLE

html css使div与文本在同一行

4 个答案: