html - divをインライン化する方法

Question

以下は、私がdivに正方形を作成しようとしている私のdivです。私が直面した問題は、正方形を作成しようとすると、正方形が新しい行に移動することです。

例：

私の[SQUARE]は次のようになります//改行なし

しかし、私の//行は自動的に壊れます
[四角]
/*自動的に改行*/このようになります

注：floatを左右に使用できません。また、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 がこのすべてのコンテンツを 1 行に収めることができることを確認してください。

編集：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