Wie lässt sich div-Elemente inline anzeigen?

254

Angesichts dieses HTML:

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

Wie können Sie sie wie folgt inline anzeigen lassen:

foo bar baz

so nicht:

foo
bar
baz

css line html Steve
quelle

Antworten:

268

Das ist dann etwas anderes:

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 -->
Erweitern Sie das Snippet

Darryl Hein
quelle
Eigentlich war dies die einzige Möglichkeit, Inline korrekt anzuzeigen. Ich weiß nicht, warum die No-Float-Lösung nicht funktioniert hat.
Necronet
23
Die hier angegebenen CSS-Klassennamen sollten nicht als Beispiel verwendet werden. Verwenden Sie die richtige semantische Benennung wie: css-tricks.com/semantic-class-names
Berik
261

Ein Inline-Div ist ein Freak des Webs und sollte geschlagen werden, bis es eine Spanne wird (mindestens 9 mal von 10) ...

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

... beantwortet die ursprüngliche Frage ...

bochgoch
quelle
11
Es gibt Zeiten, in denen Divs inline angezeigt werden sollen, z. B. wenn Sie links und rechts von einem Element einen Rand hinzufügen möchten. Ich denke nicht, dass das mit einer Spanne gemacht werden kann. Steve sollte wahrscheinlich Float anstelle von Inline verwenden.
Darryl Hein
8
Polsterung ja, nicht Rand
Andreas Wong
8
Leider unterstützt HTML5 das Einfügen eines Divs in einen <span> nicht. Früher habe ich <span> s verwendet, um CSS-Stile in einen Abschnitt einzufügen, und der Browser hat den Abschnitt nicht als Block interpretiert und mir das Blocklayout aufgezwungen. Aber ich habe heute beim Portieren meiner Seite auf JQuery Mobile + HTML5 festgestellt, dass der HTML5-Validator sich beschwert, dass es sich um ungültiges HTML5 handelt, wenn Sie ein <div> in einem <span> haben. Es gibt also Fälle, in denen das <span> -Tag anstelle von verwendet wird Ein Inline-<div> ist zumindest mit HTML5 nicht möglich.
Kmeixner
4
Manchmal, obwohl Sie in einer Welt leben, die Sie nicht geschaffen haben, und das einzige, was Sie im CSS ändern können. In diesem Fall funktioniert style = "display: inline" gut.
Matthew Lock
3
Wenn Sie nicht mit der Verwendung von Divs beschäftigt sind, ist dies eine gute Antwort. Es kann jedoch viele Gründe geben, warum Sie divs verwenden müssen, diese jedoch als Inline-Elemente angezeigt werden müssen.
Bobble
174

Versuchen Sie es so zu schreiben:

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>
Erweitern Sie das Snippet

Randy Sugianto 'Yuku'
quelle
16
Dies ist die richtige Antwort auf die Frage, aber angesichts der akzeptierten Antwort vermute ich, dass die Frage nicht das reale Szenario anspricht.
Steve Perks
34

Nachdem ich diese Frage und die Antworten ein paar Mal gelesen habe, kann ich nur davon ausgehen, dass einiges an Bearbeitung stattgefunden hat, und mein Verdacht ist, dass Sie die falsche Antwort erhalten haben, weil Sie nicht genügend Informationen bereitgestellt haben. Mein Hinweis kommt von der Verwendung von brTag.

Entschuldigung an Darryl. Ich habe class = "inline" als style = "display: inline" gelesen. Sie haben die richtige Antwort, auch wenn Sie semantisch fragwürdige Klassennamen verwenden ;-)

Die fehlende Verwendung von brstrukturellem Layout anstelle von Textlayout ist für meinen Geschmack viel zu weit verbreitet.

Wenn Sie mehr als Inline-Elemente in diese einfügen möchten, divssollten Sie diese divs schweben lassen, anstatt sie inline zu machen.

Floated Divs:

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

Inline-Divs:

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

Wenn Sie nach dem ersteren suchen, ist dies Ihre Lösung und Sie verlieren diese brTags:

<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>

Beachten Sie, dass die Breite dieser Divs fließend ist. Wenn Sie das Verhalten steuern möchten, können Sie sie auch mit Breiten versehen.

Danke, Steve

Steve Perks
quelle
24

Verwendung display:inline-blockmit Rand- und Medienabfrage für IE6 / 7:

<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>
Paul Sweatte
quelle
11

Sie sollten <span>anstelle von <div>für die richtige Art der Inline verwenden . weil div ein Element auf Blockebene ist und Sie Inline-Elemente auf Blockebene benötigen.

Hier ist HTML-Code gemäß Ihren Anforderungen: 

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

Sie haben zwei Möglichkeiten, dies zu tun

  • mit einfach display:inline-block;
  • oder mit float:left;

Sie müssen also die Anzeigeeigenschaft display:inline-block;zwangsweise ändern

Beispiel eins

div {
    display: inline-block;
}

Beispiel zwei 

div {
    float: left;
}

Sie müssen Float löschen

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

Wie bereits erwähnt, ist display: inline wahrscheinlich das, was Sie wollen. Einige Browser unterstützen auch Inline-Blöcke.

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

Kevin
quelle
3
@NexusRex Es gibt Abhilfemaßnahmen, damit sich der IE korrekt verhält. Anzeige: Inline ist die richtige Antwort. Ich glaube, die Problemumgehung ist: Anzeige: Inline-Block; * Anzeige: Inline; * Zoom: 1; Durch Einstellen des Zooms wird der IE gezwungen, das Element wie ein Blockelement zu behandeln.
Chris Stephens
7

Verwenden Sie einfach ein Wrapper-Div mit "float: left" und legen Sie Kisten hinein, die auch float: left enthalten:

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>
A. Bender
quelle
6

<span> ?

Pirat
quelle
2
Ich denke, wir sprechen über Inlining-Blockelemente, die Breite und Höhe haben können. Stellen Sie sich ein Div mit einem Hintergrundbild vor, das Sie in den Text einfließen lassen möchten.
NexusRex
6

OK für mich : 

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

Ich würde Spannweiten verwenden oder die Div nach links schweben lassen. Das einzige Problem beim Floating ist, dass Sie den Float anschließend löschen müssen oder für das enthaltene Div der Überlaufstil auf auto eingestellt sein muss

Cam Tullos
quelle
Ich glaube, wir sprechen von einem Div, das mit dem einen oder anderen Text inline ist und nicht zur Seite schwebt.
NexusRex
Wie / wann würde bei Verwendung von float: left, mit overflow: auto auf dem enthaltenen div die Bildlaufleiste, mit der der Überlauf ins Spiel kommen könnte?
Cellepo
3

Ich weiß, dass die Leute sagen, dass dies eine schreckliche Idee ist, aber es kann in der Praxis nützlich sein, wenn Sie so etwas wie Kachelbilder mit Kommentaren darunter machen möchten. zB Picasaweb verwendet es, um die Miniaturansichten in einem Album anzuzeigen.
Siehe zum Beispiel / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (Klasse goog-inline-block; ich kürze es hier mit ib ab)

/* 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; }

Wenn Sie CSS verwenden, setzen Sie Ihr div auf die Klasse ib, und jetzt ist es auf magische Weise ein Inline-Blockelement.

David Eison
quelle
3

Sie müssen die drei Divs enthalten. Hier ist ein Beispiel:

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;
}

Hinweis: Rahmenradiusattribute sind optional und funktionieren nur in CSS3-kompatiblen Browsern.

HTML

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

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

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

Beachten Sie, dass die Divs 'foo' 'bar' und 'baz' jeweils im 'include' div enthalten sind.

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

Ich denke, Sie können diesen Weg ohne CSS verwenden - 

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

Im Moment verwenden Sie ein Element auf Blockebene, sodass Sie unerwünschte Ergebnisse erhalten. So können Sie Inline-Elemente wie span, small etc.

<span>foo</span><span>bar</span><span>baz</span>
Pankaj Bisht
quelle
0

wir können das gerne so machen

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

Ipog
quelle
0 
<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 */
Waah Ronald
quelle
-1

Ich neige nur dazu, sie mit festen Breiten zu versehen, damit sie sich zur Gesamtbreite der Seite addieren - funktioniert wahrscheinlich nur, wenn Sie eine Seite mit fester Breite verwenden. Auch "float".

NFPPW
quelle