คุณจะทำให้องค์ประกอบ div แสดงแบบอินไลน์ได้อย่างไร

254

รับ HTML นี้:

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

คุณทำให้มันแสดงแบบอินไลน์ได้อย่างไร:

foo bar baz

ไม่เหมือน:

foo
bar
baz

css line html

— สตีฟ
แหล่งที่มา

268

นั่นเป็นอย่างอื่นแล้ว:

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

ขยายตัวอย่างข้อมูล

— ดาร์ริลเฮน
แหล่งที่มา

จริงๆแล้วนี่เป็นวิธีเดียวที่ฉันพบว่าแสดงอินไลน์อย่างถูกต้องฉันไม่รู้ว่าทำไมโซลูชัน no-float ไม่ทำงาน ....

— Necronet

23

ไม่ควรใช้ชื่อคลาส css ที่นี่เป็นตัวอย่าง ใช้การตั้งชื่อ semantic ที่เหมาะสมเช่น: css-tricks.com/semantic-class-names

— Berik

261

div แบบอินไลน์เป็นคนที่คลั่งไคล้ในเว็บ & ควรถูกตีจนกว่าจะกลายเป็นช่วง (อย่างน้อย 9 ครั้งจาก 10 ครั้ง) ...

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

... ตอบคำถามเดิม ...

— bochgoch
แหล่งที่มา

11

มีหลายครั้งที่คุณต้องการให้ div แสดงอินไลน์เช่นเมื่อคุณต้องการเพิ่มระยะขอบด้านซ้ายและขวาขององค์ประกอบ ฉันไม่คิดว่าสามารถทำได้ด้วยระยะเวลา Steve น่าจะใช้ float แทน inline

— Darryl Hein

8

แพ็ดดิ้งใช่ไม่ใช่มาร์จิ้

— น

8

น่าเสียดายที่ HTML5 ไม่รองรับการวาง div ไว้ใน <span> ฉันเคยใช้ <span> s เพื่อวางสไตล์ CSS ในส่วนและไม่มีเบราว์เซอร์ตีความส่วนเป็นบล็อกและบังคับเค้าโครงบล็อกของฉัน แต่ฉันเพิ่งค้นพบวันนี้ในขณะที่ย้ายหน้าของฉันไปที่ JQuery Mobile + HTML5 ว่าถ้าคุณมี <div> ภายใน <span> เครื่องมือตรวจสอบ HTML5 จะบ่นว่า HTML5 นั้นไม่ถูกต้องดังนั้นจึงมีกรณีที่ใช้แท็ก <span> แทน <div> แบบอินไลน์ไม่สามารถทำได้อย่างน้อยที่สุดก็ด้วย HTML5

— Kmeixner

4

บางครั้งแม้ว่าคุณจะอยู่ในโลกที่คุณไม่ได้สร้างและสิ่งเดียวที่คุณสามารถเปลี่ยนได้ใน CSS ในกรณีนั้น style = "display: inline" ก็ใช้งานได้ดี

— Matthew Lock

3

หากคุณไม่ 'ติด' กับการใช้ div นี่เป็นคำตอบที่ดี แต่อาจมีสาเหตุมากมายที่คุณต้องใช้ div แต่ต้องการให้ div เหล่านั้นปรากฏเป็นองค์ประกอบอินไลน์

— Bobble

174

ลองเขียนแบบนี้:

div { border: 1px solid #CCC; }

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

ขยายตัวอย่างข้อมูล

— Randy Sugianto 'Yuku'
แหล่งที่มา

16

นี่คือคำตอบที่ถูกต้องสำหรับคำถาม แต่เมื่อพิจารณาถึงคำตอบที่ยอมรับฉันสงสัยว่าคำถามนั้นไม่ได้ตอบคำถามจริง

— Steve Perks

34

เมื่อได้อ่านคำถามนี้และคำตอบสองสามครั้งทั้งหมดที่ฉันทำได้ก็คือสมมติว่ามีการแก้ไขเล็กน้อยเกิดขึ้นและความสงสัยของฉันคือคุณได้รับคำตอบที่ไม่ถูกต้องโดยไม่ให้ข้อมูลที่เพียงพอ เบาะแสของฉันมาจากการใช้brแท็ก

ขอโทษที่ดาร์ริล ฉันอ่าน class = "inline" เป็น style = "display: inline" คุณมีคำตอบที่ถูกต้องแม้ว่าคุณจะใช้ชื่อคลาสที่มีความหมายที่น่าสงสัย ;-)

การพลาดการใช้brเพื่อจัดวางโครงสร้างแทนที่จะเป็นเค้าโครงข้อความนั้นแพร่หลายเกินไปสำหรับความชอบของฉัน

หากคุณต้องการใส่องค์ประกอบแบบอินไลน์ภายในองค์ประกอบเหล่าdivsนั้นคุณควรลอยองค์ประกอบเหล่านั้นdivแทนที่จะทำให้เป็นแบบอินไลน์

divs ลอยตัว:

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

div แบบอินไลน์:

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

หากคุณเป็นผู้ติดตามคนก่อนนี่เป็นวิธีการแก้ปัญหาของคุณและทำให้brแท็กเหล่านั้นหายไป:

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

โปรดทราบว่าความกว้างของ div เหล่านี้เป็นของไหลดังนั้นอย่าลังเลที่จะใส่ความกว้างไว้หากคุณต้องการควบคุมพฤติกรรม

ขอบคุณสตีฟ

— Steve Perks
แหล่งที่มา

24

ใช้display:inline-blockกับมาร์จิ้นและข้อความค้นหาสื่อสำหรับ 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
แหล่งที่มา

11

คุณควรใช้<span>แทนการ<div>หาวิธีการที่ถูกต้องของ แบบอินไลน์ เนื่องจาก div เป็นองค์ประกอบระดับบล็อกและความต้องการของคุณสำหรับองค์ประกอบระดับบล็อกแบบอินไลน์

นี่คือรหัส html ตามความต้องการของคุณ:

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

คุณมีสองวิธีในการทำเช่นนี้

ใช้ง่าย display:inline-block;
หรือใช้ float:left;

ดังนั้นคุณจะต้องเปลี่ยนคุณสมบัติการแสดงผลdisplay:inline-block;อย่างแข็งขัน

ตัวอย่างที่หนึ่ง

div {
    display: inline-block;
}

ตัวอย่างที่สอง

div {
    float: left;
}

คุณต้องล้างทุ่น

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

— Hidayt Rahman
แหล่งที่มา

7

ดังกล่าว display: inline อาจเป็นสิ่งที่คุณต้องการ เบราว์เซอร์บางตัวยังรองรับบล็อกแบบอินไลน์

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

— เควิน
แหล่งที่มา

3

@NexusRex มีวิธีแก้ไขเพื่อให้ IE ทำงานอย่างถูกต้องอย่างไรก็ตามแสดง: inline เป็นคำตอบที่ถูกต้อง ฉันเชื่อว่าการทำงานคือ: display: inline-block; * จอแสดงผล: อินไลน์; * ซูม: 1; การตั้งค่าการซูมบังคับให้ IE ใช้องค์ประกอบเหมือนองค์ประกอบบล็อก

— Chris Stephens

7

เพียงใช้ div wrapper กับ "float: left" และใส่กล่องข้างในที่มี 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. ประมาท
แหล่งที่มา

6

<span> ?

— Pirat
แหล่งที่มา

2

ฉันคิดว่าเรากำลังพูดถึงองค์ประกอบของบล็อกที่มีความกว้างและความสูง ลองนึกภาพ div ด้วยภาพพื้นหลังที่คุณต้องการไหลแบบอินไลน์ด้วยข้อความ

— NexusRex

6

โอเคสำหรับฉัน :

<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
แหล่งที่มา

4

ฉันจะใช้ช่วงหรือลอย div ซ้าย ปัญหาเฉพาะของ floating คือคุณต้องเคลียร์ float หลังจากนั้นหรือ div ที่มีจะต้องตั้งค่าสไตล์โอเวอร์โฟลเป็นอัตโนมัติ

— Cam Tullos
แหล่งที่มา

ฉันเชื่อว่าเรากำลังพูดถึง div แบบอินไลน์ด้วยข้อความหรืออื่น ๆ ไม่ลอยไปด้านใดด้านหนึ่ง

— NexusRex

เมื่อใช้ float: left พร้อมโอเวอร์โฟลว์: auto ใน div ที่มีอยู่แถบเลื่อนที่ overflow สามารถเล่นได้ / เมื่อไหร่

— cellepo

3

ฉันรู้ว่าผู้คนพูดว่านี่เป็นความคิดที่แย่มาก แต่ในทางปฏิบัติมันอาจมีประโยชน์หากคุณต้องการทำอะไรบางอย่างเช่นภาพกระเบื้องที่มีความคิดเห็นอยู่ข้างใต้ เช่น Picasaweb ใช้เพื่อแสดงภาพขนาดย่อในอัลบั้ม
ดูตัวอย่าง / สาธิตhttp://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (คลาส goog-inline-block; ฉันย่อให้ 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; }

กำหนด CSS นั้นให้ตั้ง div ของคุณเป็น class ib และตอนนี้มันเป็นองค์ประกอบบล็อกแบบอินไลน์อย่างน่าอัศจรรย์

— เดวิดอีสัน
แหล่งที่มา

3

คุณต้องมีสาม divs นี่คือตัวอย่าง:

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

หมายเหตุ: คุณลักษณะเส้นขอบรัศมีเป็นตัวเลือกและใช้ได้เฉพาะในเบราว์เซอร์ที่สอดคล้องกับ CSS3 เท่านั้น

HTML

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

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

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

โปรดทราบว่า div 'foo' 'bar' และ 'baz' แต่ละตัวถูกเก็บไว้ใน div 'contain'

— word5150
แหล่งที่มา

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

ฉันคิดว่าคุณสามารถใช้วิธีนี้โดยไม่ต้องใช้ CSS ใด ๆ -

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

ตอนนี้คุณกำลังใช้องค์ประกอบระดับบล็อกที่ทำให้คุณได้ผลลัพธ์ที่ไม่ต้องการ ดังนั้นคุณสามารถใส่องค์ประกอบอินไลน์เช่น span, small ฯลฯ

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

— Pankaj Bisht
แหล่งที่มา

0

เราทำได้เช่นนี้

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

— omnath
แหล่งที่มา

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
แหล่งที่มา

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
แหล่งที่มา

-1

ฉันเพิ่งจะทำให้พวกเขามีความกว้างคงที่เพื่อให้พวกเขารวมถึงความกว้างทั้งหมดของหน้า - อาจใช้งานได้เฉพาะถ้าคุณใช้หน้ากว้างคงที่ ยัง "ลอย"

— NFPPW
แหล่งที่มา