आप div तत्वों को इनलाइन कैसे प्रदर्शित करते हैं?

Question

इस HTML को देखते हुए:

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

आप उन्हें इस तरह से इनलाइन कैसे प्रदर्शित करते हैं:

फू बार बाज

इस तरह नहीं:

फू
बार
बाज

Answer 1

वह कुछ और है:

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

Comments

वास्तव में यह एकमात्र तरीका था जिसे मैंने इनलाइन को सही ढंग से प्रदर्शित करने के लिए पाया था, मुझे नहीं पता कि कोई फ्लोट समाधान काम नहीं करता था ....

— नेक्रोनैट

यहाँ css वर्ग के नामों को उदाहरण के रूप में उपयोग नहीं किया जाना चाहिए। उचित अर्थ नामकरण का उपयोग करें जैसे: css-tricks.com/semantic-class-names

— Berik

Answer 2

एक इनलाइन div वेब की एक सनकी है और इसे तब तक पीटा जाना चाहिए जब तक कि यह एक स्पैन न बन जाए (10 में से कम से कम 9 बार) ...

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

... मूल प्रश्न का उत्तर ...

Comments

ऐसे समय होते हैं जब आप divs इनलाइन प्रदर्शित करना चाहते हैं, उदाहरण के लिए, जब आप किसी तत्व के बाईं और दाईं ओर एक मार्जिन जोड़ना चाहते हैं। मुझे नहीं लगता कि यह एक स्पैन के साथ किया जा सकता है। स्टीव को शायद इनलाइन के बजाय फ्लोट का उपयोग करना चाहिए।

— डैरिल हेन

पैडिंग हाँ, मार्जिन नहीं

— एंड्रियास वोंग

दुर्भाग्य से, HTML5 एक <span> के अंदर एक div डालने का समर्थन नहीं करता है। मैं सीएसएस शैलियों को एक खंड पर रखने के लिए <span> का उपयोग करता था और ब्राउज़र को खंड के रूप में व्याख्या नहीं करता था और इसके ब्लॉक लेआउट को मेरे लिए मजबूर करता था। लेकिन मैंने आज ही अपने पेज को JQuery के मोबाइल + एचटीएमएल 5 पर पोर्ट करते हुए पता लगाया कि अगर आपके पास <span> <span> के भीतर HTML5 सत्यापनकर्ता शिकायत करेगा कि यह अमान्य है HTML5 तो ऐसे मामले हैं जहां खोज के बजाय <span> टैग का उपयोग कर रहे हैं एक इनलाइन <div> संभव नहीं है, कम से कम HTML5 के साथ।

— केमिक्नर

कभी-कभी यद्यपि आप एक ऐसी दुनिया में रह रहे हैं जिसे आपने नहीं बनाया है और केवल वही चीज जिसे आप सीएसएस में बदल सकते हैं। उस मामले में शैली = "प्रदर्शन: इनलाइन" अच्छी तरह से काम करता है।

— मैथ्यू लॉक

यदि आप divs का उपयोग करने के साथ 'अटक' नहीं रहे हैं तो यह एक अच्छा जवाब है। लेकिन ऐसे बहुत से कारण हो सकते हैं जिनके लिए आपको divs का उपयोग करने की आवश्यकता है, लेकिन उन्हें इनलाइन तत्वों के रूप में प्रदर्शित होने की आवश्यकता है।

— बोबले

Answer 3

इसे इस तरह लिखने की कोशिश करें:

div { border: 1px solid #CCC; }

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

Comments

यह प्रश्न का सही उत्तर है, लेकिन स्वीकृत उत्तर को देखते हुए, मुझे संदेह है कि प्रश्न वास्तविक परिदृश्य को संबोधित नहीं करता है।

— स्टीव पर्क्स

Answer 4

इस सवाल और जवाबों को एक-दो बार पढ़ने के बाद, मैं बस इतना कर सकता हूं कि यह माना जाए कि संपादन का थोड़ा बहुत समय चल रहा है, और मेरा संदेह यह है कि आपको पर्याप्त जानकारी नहीं देने के आधार पर गलत उत्तर दिया गया है। मेरा सुराग brटैग के उपयोग से आता है ।

दर्रील के लिए माफी। मैंने क्लास = "इनलाइन" को स्टाइल = "डिस्प्ले: इनलाइन" के रूप में पढ़ा। आपके पास सही उत्तर है, भले ही आप शब्दार्थ वर्ग के नाम का उपयोग करते हों ;-)

brटेक्स्ट लेआउट के बजाय संरचनात्मक लेआउट प्रदान करने का मिस उपयोग मेरी पसंद के लिए बहुत अधिक प्रचलित है।

यदि आप इनलाइन तत्वों को इन के अंदर रखना चाहते हैं divsतो आपको divइनलाइन बनाने के बजाय उन एस को फ्लोट करना चाहिए ।

फ्लोट किए गए divs:

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

इनलाइन divs:

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

यदि आप पूर्व के बाद हैं, तो यह आपका समाधान है और उन 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>

ध्यान दें कि इन विभाजनों की चौड़ाई तरल है, इसलिए यदि आप व्यवहार को नियंत्रित करना चाहते हैं तो उन पर चौड़ाई डालने के लिए स्वतंत्र महसूस करें।

धन्यवाद, स्टीव

Answer 5

display:inline-blockIE6 / 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>

Answer 6

आपको इनलाइन के सही तरीके के <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;
}

Answer 7

जैसा कि उल्लेख किया गया है, प्रदर्शन: इनलाइन वह है जो आप चाहते हैं। कुछ ब्राउज़र इनलाइन-ब्लॉक का भी समर्थन करते हैं।

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

Comments

@NexusRex आईई को सही ढंग से प्रदर्शित करने के लिए व्यवहार करने के लिए चारों ओर काम करता है: इनलाइन सही उत्तर है। मेरा मानना ​​है कि आसपास का काम है: प्रदर्शन: इनलाइन-ब्लॉक; * प्रदर्शन: इनलाइन; * ज़ूम: 1; तत्व को ब्लॉक तत्व की तरह व्यवहार करने के लिए ज़ूम फोर्स IE सेट करना।

— क्रिस स्टीफंस

Answer 8

बस "फ्लोट: लेफ्ट" के साथ एक रैपर div का उपयोग करें और फ्लोट वाले बॉक्स को भी अंदर रखें: लेफ्ट:

सीएसएस:

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>

Answer 9

<span> ?

Comments

मुझे लगता है कि हम उन ब्लॉक तत्वों को सम्मिलित करने के बारे में बात कर रहे हैं जिनकी चौड़ाई और ऊंचाई हो सकती है। एक पृष्ठभूमि छवि के साथ एक डिव की कल्पना करें जिसे आप पाठ के साथ इनलाइन करना चाहते हैं।

— NexusRex

Answer 10

मेरे लिए ठीक है :

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

Answer 11

मैं स्पैन का उपयोग करता हूं या बायीं तरफ तैरता हूं। फ़्लोटिंग के साथ एकमात्र समस्या यह है कि आपको फ़्लोट को बाद में साफ़ करना होगा या युक्त div में ऑटो के लिए अतिप्रवाह शैली सेट होनी चाहिए

Comments

मेरा मानना ​​है कि हम पाठ या अन्य के साथ एक डिव इनलाइन के बारे में बात कर रहे हैं, एक तरफ नहीं।

— NexusRex

फ्लोट का उपयोग करते समय: बाएं, अतिप्रवाह के साथ: ऑटो वाले डिव पर, कैसे / कब स्क्रॉलबार कि ओवरफ्लो खेलने में आ सकता है?

— cellepo

Answer 12

मैं जानता हूं कि लोग कहते हैं कि यह एक भयानक विचार है, लेकिन अगर आप टाइल छवियों की तरह कुछ करना चाहते हैं तो यह उपयोगी हो सकता है। उदाहरण के लिए, पिकासाव एक एल्बम में थंबनेल प्रदर्शित करने के लिए इसका उपयोग करता है।
उदाहरण के लिए देखें / डेमो http://clouble-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; }

यह देखते हुए कि सीएसएस, आपके डिव को वर्ग ib पर सेट करता है, और अब यह जादुई रूप से एक इनलाइन ब्लॉक तत्व है।

Answer 13

आपको तीन डिवीजनों को शामिल करने की आवश्यकता है। यहाँ एक उदाहरण है:

सीएसएस

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 अनुरूप ब्राउज़रों में काम करती हैं।

एचटीएमएल

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

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

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

ध्यान दें कि डिव 'फू' 'बार' और 'बाज' प्रत्येक 'डिव' डिव के भीतर हैं।

Answer 14

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

Answer 15

मुझे लगता है कि आप बिना किसी सीएसएस का उपयोग किए इस तरह से उपयोग कर सकते हैं -

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

अभी आप ब्लॉक स्तर के तत्व का उपयोग कर रहे हैं जिस तरह से आपको अवांछित परिणाम मिल रहे हैं। तो आप इनलाइन एलिमेंट जैसे स्पैन, स्मॉल आदि को कर सकते हैं।

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

Answer 16

हम ऐसा कर सकते हैं

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

Answer 17

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

Answer 18

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

Answer 19

मैं उन्हें केवल निश्चित चौड़ाई बनाने के लिए बाध्य करता हूं ताकि वे पृष्ठ की कुल चौड़ाई में जोड़ दें - शायद केवल तभी काम करें जब आप निश्चित चौड़ाई वाले पृष्ठ का उपयोग कर रहे हों। इसके अलावा "फ्लोट"।