7

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

我的代码：

<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>

我应该如何编码？

4

4 回答 4

8

将 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>
于 2013-10-30T11:46:12.980 回答
4

有很多display可用的属性：

尝试使用display:inline-block;

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

希望这可以帮助！

小提琴演示

删除<p></p>标签只是<div>按原样使用<p>总是需要换行。

更新小提琴

于 2013-10-30T11:37:23.420 回答
1

使用 span 代替 div 并添加 (display:inline-block;) 段落 (p) 不能包含 (div) 但可以包含 (span) ' 座位可用性。

有空位。

可用座位正在减少。

不到 15% 的可用座位。

没有空位。

'

于 2013-10-30T11:47:50.017 回答
0

将此代码放入您的 css 文件中

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

小提琴

于 2013-10-30T11:51:37.503 回答