web-dev-qa-db-ja.com

Div要素をどのようにインライン表示させるのですか？

このHTMLを考えると：

<div>foo</div><div>bar</div><div>baz</div>

どのようにそれらをこのようにインライン表示させるのですか？

フーバーバズ

こんな感じじゃない：

フー
バー
バズ

csslinehtml
225
Steve

それ以外のことです：

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 -->
245
Darryl Hein

インラインdivはWebの異常であり、それがスパンになるまで打たれるべきです（少なくとも10回のうち9回）...

<span>foo</span>
<span>bar</span>
<span>baz</span>

...元の質問に答えます...

246
bochgoch

このように書いてみてください。

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>
167
Randy Sugianto 'Yuku'

この質問とその答えを2、3回読んだ後、私ができることは、かなりの編集が行われていると想定することだけです。私は、十分な情報が提供されていないことに基づいて誤った答えを与えられたのです。私の手がかりはbrタグの使用から来ています。

ダリルへの謝罪。 class = "inline"をstyle = "display：inline"と読みます。意味的に疑わしいクラス名を使っていても、正しい答えがあります;-)

テキストレイアウトではなく構造レイアウトを提供するためにbrを誤って使用することは、私の好みではあまりにも一般的です。

それらのdivsの内側にインライン要素以上のものを入れたいのなら、それらをインラインにするのではなく、それらのdivを浮動させるべきです。

浮動div

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

インラインdiv

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

前者の場合は、これがあなたの解決策であり、それらのbrタグを失います。

<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の幅は流動的なので、振る舞いを制御したい場合は自由にそれらにwidthを置いてください。

ありがとう、スティーブ

32
Steve Perks

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>
23
Paul Sweatte

inline の正しい方法のためには<span>の代わりに<div>を使うべきです。 divはブロックレベルの要素であり、あなたの要件はインラインブロックレベルの要素に対するものであるためです。

これはあなたの要求に応じたHTMLコードです。

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

これを行うには2つの方法があります

  • 単純なdisplay:inline-block;を使う
  • またはfloat:left;を使う

そのため、表示プロパティdisplay:inline-block;を強制的に変更する必要があります

例1 

div {
    display: inline-block;
}

例2 

div {
    float: left;
}

あなたはフロートをクリアする必要があります

.main-div:after {
    content: "";
    clear: both;
    display: table;
}
10
Hidayt Rahman

ただ "float：left"を付けたラッパー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>
7
A. Bender

前述のように、display：inlineはおそらくあなたが望むものです。一部のブラウザではインラインブロックもサポートされています。

http://www.quirksmode.org/css/display.html#inlineblock

7
Kevin

大丈夫 ：

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>
6
flairon

<span>？

5
Pirat

私はスパンを使うか、divを左に浮かべるでしょう。浮動小数点に関する唯一の問題は、後で浮動小数点をクリアしなければならないか、それを含むdivのオーバーフロースタイルをautoに設定しなければならないことです。

4
Cam Tullos

私は人々がこれがひどい考えであると言うのを知っています、しかし、あなたがそれらの下にコメントでタイル画像のような何かをしたいならばそれは実際には役に立つことができます。例えばPicasaウェブはこれを使ってアルバムのサムネイルを表示します。
例えば/ 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
David Eison

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属性はオプションであり、CSS 3準拠のブラウザでのみ機能します。

_ html _ 

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

Divの 'foo'、 'bar'、 'baz'はそれぞれ 'contains' div内に保持されていることに注意してください。

3
word5150
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>
2
Darryl Hein

私はあなたがCSSを使用せずにこの方法を使用できると思います - 

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

今、あなたはそのようにあなたが望まない結果を得ているようにブロックレベル要素を使用しています。だから、あなたはスパン、小さいなどのような要素をインライン化することができます.

<span>foo</span><span>bar</span><span>baz</span>
2
Pankaj Bisht

私たちはこれをすることができます

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>
0
omnath
<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 */
0
Waah Ronald
<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>

http://jsfiddle.net/f8L0y5wx/

0
Ipog