it-swarm.com.de

Wie lassen sich div-Elemente inline anzeigen?

In Anbetracht dieses HTML:

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

Wie können Sie sie so inline anzeigen lassen:

foo Bar Baz

so nicht:

foo
Bar
baz

229
Steve

Das ist dann noch 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 -->
252
Darryl Hein

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

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

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

249
bochgoch

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

Nachdem ich diese Frage und die Antworten ein paar Mal gelesen habe, kann ich nur davon ausgehen, dass einiges bearbeitet wurde, und ich habe den Verdacht, dass Sie die falsche Antwort erhalten haben, weil Sie nicht genügend Informationen angegeben haben. Mein Hinweis kommt von der Verwendung des br -Tags.

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

Der Missbrauch von br zur Bereitstellung des strukturellen Layouts anstelle des Textlayouts ist für mich viel zu weit verbreitet.

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

Floated Divs:

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

Inline-Divs:

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

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

<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. Sie können sie also beliebig erweitern, wenn Sie das Verhalten steuern möchten.

Danke, Steve

33
Steve Perks

Verwenden Sie display:inline-block mit einer 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>
23
Paul Sweatte

Sie sollten <span> anstelle von <div> für die korrekte Art von inline verwenden. weil div ein Block-Level-Element ist und Sie Inline-Block-Level-Elemente 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 einfachen display:inline-block;
  • oder mit float:left;

sie müssen also die Anzeigeeigenschaft display:inline-block; mit Nachdruck ä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;
}
11
Hidayt Rahman

Verwenden Sie einfach ein Wrapper-Div mit "float: left" und legen Sie Kisten hinein, die ebenfalls 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>
7
A. Bender

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

7
Kevin

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

<span>?

5
Pirat

Ich würde Spannweiten verwenden oder den Div nach links schweben lassen. Das einzige Problem mit Floating ist, dass Sie das Float danach löschen müssen oder dass für das enthaltende Div der Überlaufstil auf auto gesetzt sein muss

4
Cam Tullos

Ich weiß, dass die Leute sagen, das ist eine schreckliche Idee, aber in der Praxis kann es nützlich sein, wenn Sie so etwas wie Kachelbilder mit Kommentaren darunter machen möchten. z.B. 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 (class 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; }

In Anbetracht dessen, dass CSS, setzen Sie Ihr Div auf Klasse Ib, und jetzt ist es magisch ein Inline-Block-Element.

3
David Eison

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: Die Randradius-Attribute 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 in der div 'contain' enthalten sind.

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

Ich denke, Sie können diesen Weg ohne Verwendung von 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, um unerwünschte Ergebnisse zu erzielen. So können Sie Inline-Elemente wie Span, Small usw.

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

wir können das so machen

.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