logo标签列表

HTML CSS 如何让 div 与文本在同一行显示？

csshtml
9

我的问题是，如何避免文本换行？

我的代码：

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

我该如何编写这段代码？
搜索http://stackoverflow.com/search?q=[html]+div+same+line+is%3Aq; 可能的重复问题包括https://dev59.com/fWfWa4cB1Zd3GeqPktA_，http://stackoverflow.com/q/16312650/1741542等。 - Olaf Dietsche
1
问题出在你的 <p> 标签上。这个标签会把每一行都当做一个单独的段落处理。所以请使用单个 <p> 标签来包含所有的 div。 - user2496033
4个回答
9
添加display: inline-block
<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>
4
有很多可用的 display 属性：
尝试使用 display:inline-block; 
div style="width: 10px; height: 10px; background-color: green; border: 0px;display:inline-block;" ></div>

希望这能帮到你！
删除 <p></p> 标签，使用 <div> 代替 <p>，因为 <p> 总是会换行。 fiddle-Demo 更新后的 Fiddle
1
请使用span代替div并添加（display:inline-block;） 段落（p）不能包含（div），但可以包含（span）
座位可用性。
有可用的座位。
可用座位正在减少。
可用座位少于15％。
没有可用座位。
'
0
将以下代码放入你的CSS文件中
div {
    margin: 5px 10px 0 0 ;
    float:left;
}

代码片段

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接