Bagaimana Anda membuat tampilan elemen div sebaris?

254

Diberikan HTML ini:

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

Bagaimana Anda membuatnya ditampilkan inline seperti ini:

foo bar baz

tidak seperti ini:

foo
bar
baz

css line html Steve
sumber

Jawaban:

268

Itu sesuatu yang lain:

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

Darryl Hein
sumber
sebenarnya ini adalah satu-satunya cara saya menemukan untuk menampilkan inline dengan benar, saya tidak tahu mengapa solusi no-float tidak berfungsi ....
Necronet
23
Nama-nama kelas css di sini tidak boleh digunakan sebagai contoh. Gunakan penamaan semantik yang tepat seperti: css-tricks.com/semantic-class-names
Berik
261

Inline div adalah aneh web & harus dikalahkan hingga menjadi span (setidaknya 9 kali dari 10) ...

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

... menjawab pertanyaan aslinya ...

bochgoch
sumber
11
Ada saat-saat ketika Anda ingin div untuk menampilkan inline, misalnya, ketika Anda ingin menambahkan margin di sebelah kiri dan kanan suatu elemen. Saya tidak berpikir itu bisa dilakukan dengan span. Steve mungkin harus menggunakan float bukan inline.
Darryl Hein
8
padding ya, bukan margin
Andreas Wong
8
Sayangnya, HTML5 tidak mendukung menempatkan div di dalam <span>. Saya dulu menggunakan <span> s untuk meletakkan gaya CSS pada suatu bagian dan tidak memiliki browser menafsirkan bagian sebagai blok dan memaksa tata letak blok pada saya. Tapi saya baru menemukan hari ini ketika memindahkan halaman saya ke JQuery Mobile + HTML5 bahwa jika Anda memiliki <div> dalam <span>, validator HTML5 akan mengeluh bahwa itu adalah HTML5 yang tidak valid sehingga ada kasus di mana menggunakan tag <span> alih-alih inline <div> tidak layak, setidaknya dengan HTML5.
Kmeixner
4
Terkadang meskipun Anda hidup di dunia yang tidak Anda ciptakan dan satu-satunya hal yang dapat Anda ubah dalam CSS. Dalam hal ini style = "display: inline" berfungsi dengan baik.
Matthew Lock
3
Jika Anda tidak 'terjebak' dengan menggunakan divs ini adalah jawaban yang bagus. Tetapi mungkin ada banyak alasan mengapa Anda perlu menggunakan divs tetapi membutuhkannya untuk muncul sebagai elemen inline.
Bobble
174

Coba tulis seperti ini:

div { border: 1px solid #CCC; }
    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>
Luaskan cuplikan

Randy Sugianto 'Yuku'
sumber
16
Ini adalah jawaban yang benar untuk pertanyaan itu, tetapi mengingat jawaban yang diterima, saya menduga pertanyaan itu tidak membahas skenario nyata.
Steve Perks
34

Setelah membaca pertanyaan ini dan jawabannya beberapa kali, yang bisa saya lakukan hanyalah berasumsi bahwa ada sedikit pengeditan yang sedang terjadi, dan kecurigaan saya adalah Anda telah diberikan jawaban yang salah berdasarkan tidak memberikan informasi yang cukup. Petunjuk saya berasal dari penggunaan brtag.

Permintaan maaf kepada Darryl. Saya membaca class = "inline" as style = "display: inline". Anda memiliki jawaban yang benar, bahkan jika Anda menggunakan nama kelas yang dipertanyakan secara semantik ;-)

Kehilangan penggunaan bruntuk menyediakan tata letak struktural daripada tata letak tekstual terlalu lazim untuk selera saya.

Jika Anda ingin memasukkan lebih dari elemen sebaris di dalamnya, divsmaka Anda harus melambangkannya divalih-alih membuatnya sejajar.

Div mengambang:

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

Inline divs:

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

Jika Anda mencari yang pertama, maka ini adalah solusi Anda dan kehilangan brtag itu:

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

perhatikan bahwa lebar div ini adalah fluida, jadi silakan letakkan lebar pada mereka jika Anda ingin mengontrol perilaku.

Terima kasih, Steve

Steve Perks
sumber
24

Gunakan display:inline-blockdengan margin dan permintaan media untuk 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
sumber
11

Anda harus menggunakan <span>sebagai ganti <div>untuk cara inline yang benar . karena div adalah elemen level blok, dan persyaratan Anda adalah untuk elemen level blok inline.

Berikut adalah kode html sesuai kebutuhan Anda: 

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

Anda punya dua cara untuk melakukan ini

  • menggunakan sederhana display:inline-block;
  • atau menggunakan float:left;

jadi Anda harus mengubah properti tampilan display:inline-block;dengan paksa

Contoh satu

div {
    display: inline-block;
}

Contoh dua 

div {
    float: left;
}

Anda perlu menghapus float

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

Seperti disebutkan, display: inline mungkin yang Anda inginkan. Beberapa browser juga mendukung inline-blok.

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

Kevin
sumber
3
@NexusRex ada solusi untuk mendapatkan IE untuk berperilaku dengan benar namun tampilan: inline adalah jawaban yang benar. Saya percaya pekerjaan di sekitar adalah: display: inline-block; * display: inline; * zoom: 1; pengaturan zoom memaksa IE untuk memperlakukan elemen seperti elemen blok.
Chris Stephens
7

Cukup gunakan pembungkus div dengan "float: left" dan masukkan kotak di dalamnya juga mengandung 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
sumber
6

<span> ?

Pirat
sumber
2
Saya pikir kita berbicara tentang elemen blok inlining yang dapat memiliki lebar dan tinggi. Bayangkan div dengan gambar latar yang ingin Anda alir sejajar dengan teks.
NexusRex
6

ok buat saya: 

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

Saya akan menggunakan bentang atau mengapung div kiri. Satu-satunya masalah dengan mengambang adalah bahwa Anda harus menghapus float sesudahnya atau div yang mengandung harus memiliki gaya overflow diatur ke otomatis

Cam Tullos
sumber
Saya percaya kita berbicara tentang div sebaris dengan teks atau lainnya, tidak melayang ke satu sisi.
NexusRex
Saat menggunakan float: left, with overflow: auto pada div yang berisi, bagaimana / kapan scrollbar yang bisa ikut bermain melimpah?
cellepo
3

Saya tahu orang-orang mengatakan ini adalah ide yang buruk, tetapi dalam praktiknya bisa berguna jika Anda ingin melakukan sesuatu seperti gambar ubin dengan komentar di bawahnya. mis. Picasaweb menggunakannya untuk menampilkan thumbnail dalam sebuah album.
Lihat misalnya / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (blok goog-inline-blok; saya menyingkatnya menjadi ib di sini)

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

Mengingat CSS itu, set div Anda ke kelas ib, dan sekarang secara ajaib elemen blok inline.

David Eison
sumber
3

Anda harus mengandung tiga div. Berikut ini sebuah contoh:

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

Catatan: atribut border-radius adalah opsional dan hanya berfungsi di browser yang kompatibel dengan CSS3.

HTML

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

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

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

Perhatikan bahwa div 'foo' 'bar' dan 'baz' masing-masing dipegang dalam div 'berisi'.

word5150
sumber
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
sumber
2

Saya pikir Anda dapat menggunakan cara ini tanpa menggunakan css - 

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

Saat ini Anda menggunakan elemen level blok sehingga Anda mendapatkan hasil yang tidak diinginkan. Jadi Anda dapat elemen inline seperti rentang, kecil dll.

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

kita bisa melakukan ini seperti

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

Saya hanya cenderung membuat mereka lebar tetap sehingga mereka menambahkan hingga total lebar halaman - mungkin hanya berfungsi jika Anda menggunakan halaman lebar tetap. Juga "mengambang".

NFPPW
sumber