Jak sprawić, by elementy div wyświetlały się w linii?

254

Biorąc pod uwagę ten HTML:

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

Jak sprawić, by wyświetlały się w następujący sposób:

foo bar baz

nie tak jak to:

foo
bar
baz

css line html Steve
źródło

268

To coś innego:

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

Rozwiń fragment kodu

Darryl Hein
źródło

w rzeczywistości był to jedyny sposób, w jaki poprawnie wyświetlałem się w treści. Nie wiem, dlaczego rozwiązanie no-float nie zadziałało ...

Necronet

23

Nazwy klas css tutaj nie powinny być używane jako przykład. Użyj prawidłowego nazewnictwa semantycznego, takiego jak: css-tricks.com/semantic-class-names

Berik

261

Inline div jest wybrykiem sieci i należy go pokonać, aż stanie się rozpiętością (co najmniej 9 razy na 10) ...

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

... odpowiada na oryginalne pytanie ...

Bochgoch
źródło

11

Są chwile, kiedy div ma wyświetlać się w linii, na przykład, gdy chcesz dodać margines po lewej i prawej stronie elementu. Nie sądzę, że można to zrobić z rozpiętością. Steve powinien jednak prawdopodobnie używać float zamiast inline.

Darryl Hein

8

wypełnienie tak, nie margines

Andreas Wong

8

Niestety, HTML5 nie obsługuje wstawiania div wewnątrz <span>. Kiedyś używałem <span> s do umieszczania stylów CSS w sekcji, a przeglądarka nie interpretuje tej sekcji jako bloku i nie wymusza na mnie układu bloku. Ale właśnie dzisiaj odkryłem podczas przenoszenia mojej strony do JQuery Mobile + HTML5, że jeśli masz <div> w <span> walidator HTML5 będzie narzekał, że jest to nieprawidłowy HTML5, więc są przypadki, w których użycie tagu <span> zamiast wstawienie <div> nie jest możliwe, przynajmniej w HTML5.

Kmeixner,

4

Czasami żyjesz w świecie, którego nie stworzyłeś i jedyną rzeczą, którą możesz zmienić w CSS. W takim przypadku styl = "display: inline" działa dobrze.

Matthew Lock

3

Jeśli nie utkniesz w używaniu div, to dobra odpowiedź. Ale może być wiele powodów, dla których musisz używać div, ale potrzebujesz, aby pojawiały się jako elementy wbudowane.

Bobble,

174

Spróbuj napisać w ten sposób:

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

Rozwiń fragment kodu

Randy Sugianto „Yuku”
źródło

16

To jest poprawna odpowiedź na pytanie, ale biorąc pod uwagę przyjętą odpowiedź, podejrzewam, że pytanie nie dotyczy prawdziwego scenariusza.

Steve Perks,

34

Po kilkukrotnym przeczytaniu tego pytania i odpowiedzi mogę jedynie założyć, że trwało sporo edycji, i podejrzewam, że otrzymałeś niepoprawną odpowiedź z powodu niewystarczającej ilości informacji. Moja wskazówka pochodzi od użycia brtagu.

Przepraszam Darryl. Czytam class = „inline” jako style = „display: inline”. Masz poprawną odpowiedź, nawet jeśli używasz semantycznie wątpliwych nazw klas ;-)

Nieudane użycie brdo zapewnienia układu strukturalnego zamiast do układu tekstowego jest zdecydowanie zbyt powszechne dla moich upodobań.

Jeśli chcesz umieścić w nich więcej niż elementy wbudowane divs, powinieneś unosić te elementy divzamiast umieszczać je w linii.

Pływające divy:

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

Inline divs:

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

Jeśli szukasz pierwszego, oto twoje rozwiązanie i zgub te brtagi:

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

zwróć uwagę, że szerokość tych div jest płynna, więc możesz je nałożyć, jeśli chcesz kontrolować zachowanie.

Dzięki, Steve

Steve Perks
źródło

24

Użyj display:inline-blockz marginesem i zapytaniem o media dla 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
źródło

11

Należy użyć <span>zamiast <div>do prawidłowego sposobu inline . ponieważ div jest elementem na poziomie bloku, a twoje wymagania dotyczą elementów na poziomie bloku wbudowanego.

Oto kod HTML zgodnie z Twoimi wymaganiami:

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

Możesz to zrobić na dwa sposoby

używając prostego display:inline-block;
lub używając float:left;

więc musisz display:inline-block;zdecydowanie zmienić właściwość wyświetlania

Przykład pierwszy

div {
    display: inline-block;
}

Przykład drugi

div {
    float: left;
}

musisz wyczyścić pływak

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

Hidayt Rahman
źródło

7

Jak wspomniano, display: inline jest prawdopodobnie tym, czego chcesz. Niektóre przeglądarki obsługują również bloki wbudowane.

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

Kevin
źródło

3

@NexusRex istnieje dookoła, aby IE zachowywał się poprawnie, jednak wyświetlanie: inline jest poprawną odpowiedzią. Uważam, że obejście tego problemu: display: inline-block; * wyświetlacz: wbudowany; * zoom: 1; ustawienie zoom zmusza IE do traktowania elementu jak elementu blokowego.

Chris Stephens

7

Wystarczy użyć div otoki z „float: left” i umieścić w środku pola zawierające również 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>

A. Bender
źródło

6

<span> ?

Pirat
źródło

2

Myślę, że mówimy o wstawianych elementach blokowych, które mogą mieć szerokość i wysokość. Wyobraź sobie div z obrazem tła, który chcesz popłynąć w linii z tekstem.

NexusRex,

6

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

fliron
źródło

4

Używałbym rozpiętości lub unosiłbym div w lewo. Jedynym problemem związanym z przestawianiem jest to, że musisz później wyczyścić zmiennoprzecinkową, lub zawierający div musi mieć styl przepełnienia ustawiony na auto

Cam Tullos
źródło

Myślę, że mówimy o div inline z tekstem lub innym, a nie przestawiony na bok.

NexusRex,

Kiedy używasz float: left, with overflow: auto na zawierającym div, jak / kiedy pojawi się pasek przewijania, że przepełnienie może się pojawić?

cellepo

3

Wiem, że ludzie twierdzą, że to okropny pomysł, ale w praktyce może być przydatny, jeśli chcesz zrobić coś w rodzaju obrazów kafelkowych z komentarzami pod nimi. np. Picasaweb używa go do wyświetlania miniatur w albumie.
Zobacz na przykład / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (klasa goog-inline-block; tutaj skracam do 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; }

Biorąc pod uwagę, że CSS, ustaw div na klasę ib, a teraz jest magicznie wbudowanym elementem blokowym.

David Eison
źródło

3

Musisz zawierać trzy divy. Oto przykład:

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

Uwaga: atrybuty border-radius są opcjonalne i działają tylko w przeglądarkach zgodnych z CSS3.

HTML

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

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

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

Zauważ, że pasek div foo i pasek baz są przechowywane w div zawierającym.

słowo5150
źródło

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
źródło

2

Myślę, że możesz używać tego w ten sposób bez użycia css -

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

W tej chwili używasz elementu poziomu bloku w ten sposób, aby uzyskać niechciany wynik. Możesz więc wstawić element taki jak rozpiętość, mały itp.

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

Pankaj Biszt
źródło

0

możemy to zrobić tak

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

omnath
źródło

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
źródło

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
źródło

-1

Po prostu dążę do tego, aby miały stałe szerokości, aby sumowały się do całkowitej szerokości strony - prawdopodobnie działa tylko wtedy, gdy używasz strony o stałej szerokości. Również „unosić się”.

NFPPW
źródło

Jak sprawić, by elementy div wyświetlały się w linii?

Odpowiedzi:

Możesz to zrobić na dwa sposoby