html - 如何内联div

Question

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

例子：

我的 [SQUARE] 应该是这样的 // 没有换行符

但是我的 // 行自动换行
[正方形]
/* 自动换行 */ 看起来像这样

注意：我不能左右使用浮动，我也试过 display:inline; 但它没有用。请让我知道如何为我的内容创建一个方形内联

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

score 5 · Accepted Answer

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

Your content
[SQUARE]
More content

代替

Your content [SQUARE] more content

你有没有尝试过display: inline-block;

另外，检查包含的 div 是否能够将所有这些内容放在一行中。

编辑：请记住，这display: block是（大多数）元素的DEFAULT属性，这将强制它们在新行上。display:因此，要更改此设置，您可以通过设置自定义属性自己覆盖默认值。

score 4 · Accepted Answer

通过添加display:inline-block到您的代码中来试试这个

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

score 4 · Accepted Answer

如果我的问题是正确的：

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

希望这有效。

score 0 · Accepted Answer

您需要将 display: inline 属性应用于您想要在同一行上的所有元素，否则它将不起作用，如果您愿意，您可以应用 float 属性。

4 回答 4