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

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


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


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>


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


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>

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

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


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>

6

<span> ?


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>

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


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.


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.


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>

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>

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>

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/


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

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.