div要素をインラインで表示するにはどうしますか？
https://stackoverflow.com/questions/224602
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
このHTMLを指定：
<div>foo</div><div>bar</div><div>baz</div>
このようにインラインで表示するにはどうすればよいですか
foo bar baz
これは好きではない：
foo
バー
バズ
解決
それ以外の場合：
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->
他のヒント
インラインdivはWebのフリーク<！> amp;スパンになるまで（少なくとも10回のうち9回）叩かなければなりません...
<span>foo</span>
<span>bar</span>
<span>baz</span>
...元の質問に答えます...
次のように書いてみてください：
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
この質問と回答を数回読んで、私ができることは、かなりの編集が行われていると仮定することだけです。情報。私の手がかりはbrタグの使用から来ています。
ダリルに謝罪。 class = <！> quot; inline <！> quot;を読みました。 as style = <！> quot; display：inline <！> quot ;.意味論的に疑わしいクラス名を使用している場合でも、正しい答えがあります;-）
テキストレイアウトではなく構造レイアウトを提供するためにdivsを誤って使用することは、私の好みにはあまりにも広まっています。
これらのdiv内にインライン要素以上を配置したい場合は、インラインにするのではなく、これらの<=>をフローティングにする必要があります。
フローティングdiv：
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
インラインdiv：
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
前者を使用している場合、これが解決策であり、これらの<=>タグを失います：
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
これらのdivの幅は流動的であるため、動作を制御したい場合は、それらのdivに幅を自由に設定してください。
ありがとう、 スティーブ
IE6 / 7のマージンとメディアクエリでdisplay:inline-blockを使用：
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
の正しい方法のために、
<span>の代わりに<div>を使用する必要があります インライン。 divはブロックレベルの要素であり、要件はインラインブロックレベルの要素であるためです。
要件ごとのhtmlコードは次のとおりです：
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
これを行うには2つの方法があります
- 単純な
display:inline-block;を使用する
- または
float:left;を使用
そのため、表示プロパティを<=>強制的に変更する必要があります
例1
div {
display: inline-block;
}
例2
div {
float: left;
}
フロートをクリアする必要があります
.main-div:after {
content: "";
clear: both;
display: table;
}
前述のように、display：inlineはおそらくあなたが望むものです。一部のブラウザはインラインブロックもサポートしています。
<！> quot; float：left <！> quot;でラッパーdivを使用するだけです。また、float：left：
を含むボックスを内部に配置しますCSS：
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}
HTML：
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>
OK、私にとって：
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
<span>？
スパンを使用するか、divを左にフロートします。フローティングの唯一の問題は、後でフロートをクリアする必要があること、または含まれているdivでオーバーフロースタイルをautoに設定する必要があることです
これはひどい考えだと人々が言うことは知っていますが、実際には、下にコメントを付けてタイル画像のようなことをしたい場合に役立ちます。例えばPicasawebはこれを使用して、アルバムのサムネイルを表示します。
example / demo http：// closure-libraryをご覧ください。 googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html （class goog-inline-block;ここではibと略しています）
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }
そのCSSを指定し、divをクラスibに設定すると、魔法のようにインラインブロック要素になります。
3つのdivを含める必要があります。次に例を示します。
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}
注：border-radius属性はオプションであり、CSS3準拠のブラウザーでのみ機能します。
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>
「foo」「bar」および「baz」のdivはそれぞれ「contain」div内に保持されていることに注意してください。
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
CSSを使用せずにこの方法を使用できると思います-
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>
今は、ブロックレベルの要素を使用して、不要な結果を取得しています。したがって、span、smallなどの要素をインライン化できます。
<span>foo</span><span>bar</span><span>baz</span>
次のようにできます
.left {
float:left;
margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
<div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div>
<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */
ページの合計幅になるように固定幅にする傾向があります-おそらく、固定幅のページを使用している場合にのみ機能します。 <！> quot; float <！> quot;。
