html css使div与文本在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19681089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html css make div be on the same line as text
提问by Andreas
My question is, how do I avoid having the text on a new row?
我的问题是，如何避免将文本放在新行上？
My code:
我的代码：
<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>
How should I code this?
我应该如何编码？
回答by Laerte Sousa Neto
add display: inline-block to div
将 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>
回答by Dhaval Marthak
There are so many displayproperties are available:
有很多display可用的属性：
Try using display:inline-block;
尝试使用 display:inline-block;
div style="width: 10px; height: 10px; background-color: green; border: 0px;display:inline-block;" ></div>
Hope this helps!
希望这可以帮助！
Remove <p></p>tag just use <div>as <p>is always takes new line.
删除<p></p>标签只是<div>按原样使用<p>总是需要换行。
回答by Hany HarbY
Use span instead of div and add (display:inline-block;) paragraph (p) Can't Contain (div) but can contain (span) ' Seating availability.
使用 span 代替 div 并添加 (display:inline-block;) 段落 (p) 不能包含 (div) 但可以包含 (span) ' 座位可用性。
有空位。可用座位正在减少。不到 15% 的座位可用。 没有空位。'