html css 使 div 与文本在同一行答案

【问题标题】：html css make div be on the same line as texthtml css 使 div 与文本在同一行
【发布时间】：2015-11-17 21:02:55
【问题描述】：

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

我的代码：

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

我应该如何编码？

【问题讨论】：

搜索stackoverflow.com/search?q=[html]+div+same+line+is%3Aq;可能重复 stackoverflow.com/q/12171992/1741542, stackoverflow.com/q/16312650/1741542, ...
问题是你的
标签。这个标签将每一行作为单独的段落。所以对所有 div 使用单个

。

标签： css html

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

有空位。可用座位正在减少。不到 15% 的可用座位。没有空位。 '

【讨论】：

【解决方案4】：

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

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

FIDDLE

【讨论】：