如何内联div

Question

以下是我的div，其中我试图在div中创建一个正方形，我面临的问题是，当我尝试创建一个正方形时，然后正方形转到新线。

示例：

My [SQUARE] Should look like this // NO linebreak

But my // line automatically break
[SQUARE] 
/* line automatically break */ look like this

注意：我不能左右使用浮点数，我也尝试显示：inline;但它没有用。请告诉我如何在内容中创建一个内联方块

<div style="width:10px; height:10px; border:1px solid #000; background:yellow;"></div>

Answer 1

根据我的理解，这是正在发生的事情：

Your content
[SQUARE]
More content

而不是

Your content [SQUARE] more content

您是否尝试过display: inline-block;

另外，检查包含div是否能够将所有这些内容整合到一行中。

修改：请注意display: block是（大多数）元素的 DEFAULT 属性，这会强制它们换行。因此，要更改此设置，您可以通过设置自定义display:属性来自行覆盖默认值。

有关它们的列表，请转到：http://www.w3.org/wiki/CSS/Properties/display

Answer 2

通过在代码中添加display:inline-block来尝试此操作

<div style="display: inline-block; width:10px; height:10px; border:1px solid #000; background:yellow;"></div>

Answer 3

如果我的问题是对的：

尝试在div的styletag中设置display:inline-block;。

希望这有效。

Answer 4

你需要将display：inline属性应用于你想要在同一行上的所有元素， 否则它不会工作，如果你想，你可以然后应用浮动属性。