पी टैग के साथ नई लाइन से कैसे बचें?

Question

<p>टैग के साथ काम करते समय मैं एक ही लाइन पर कैसे रह सकता हूं ?

Comments

एक छवि और पाठ के साथ हिंडोला बनाना चाहते हैं

— जोश

@ निशांत: फिर इस्तेमाल करो, कहो <span>। <p>पैराग्राफ के लिए है।

— स्टीव हैरिसन

@ निशांत: जब आपको एक टैग को एक निश्चित तरीके से व्यवहार करने के लिए मजबूर करना पड़ता है (जैसे कि इसे बनाने के display: inline;बजाय display: block;), यह एक अच्छा संकेत है कि आप गलत टैग का उपयोग कर रहे हैं ...

— स्टीव हैरिसन

Answer 1

display: inlineCSS संपत्ति का उपयोग करें ।

आदर्श: स्टाइलशीट में:

#container p { display: inline }

खराब / चरम स्थिति: इनलाइन:

<p style="display:inline">...</p>

Comments

सही सीएसएस, लेकिन मूल प्रश्न टिप्पणियों में लड़के सही हैं ... अपने आप से पूछें कि आप ऐसा क्यों करेंगे ... SPANइस स्थिति के लिए बेहतर फिट लगता है।

— one.beat.consumer

स्पैन एक ही है और एक नई लाइन पर नहीं जाता है! जैसा one.beat.consumerकि कहा गया है

— Anicho

+1 उत्तरदायी मीडिया प्रश्नों का उपयोग करके मोबाइल उपकरणों पर स्थान बचाने के लिए उपयोगी: D

— gef

मैं कोणीयजेएस में काम कर रहा हूं, और मुझे 'एनजी-रिपीट' के साथ एक पैराग्राफ दोहराने की जरूरत है, यह पूरी तरह से काम करता है। और स्पैन ने ही मुझे त्रुटि दी।

— स्कुल

एक प्रोग्राम के साथ काम करते समय किसी को इसकी आवश्यकता होती है, जिसका आउटपुट विभाजकों के रूप में <p> टैग का उपयोग करता है। उदाहरण के लिए Django रूपों।

— जिम पॉल

Answer 2

<p>पैरा टैग पाठ के पैराग्राफ को निर्दिष्ट के लिए है। यदि आप पाठ को एक नई पंक्ति पर शुरू नहीं करना चाहते हैं, तो मेरा सुझाव है कि आप <p>टैग का गलत तरीके से उपयोग कर रहे हैं । शायद <span>टैग अधिक बारीकी से फिट बैठता है कि आप क्या हासिल करना चाहते हैं ...?

Comments

यह स्वीकृत उत्तर होना चाहिए। सवाल का कोई सीधा जवाब नहीं, लेकिन शायद समस्या का बेहतर समाधान है।

— Fr4nc3sc0NL

Answer 3

मैं css के लिए इस पार आया था

span, p{overflow:hidden; white-space: nowrap;}

इसी तरह के stackoverflow प्रश्न के माध्यम से

Comments

मुझे अतिप्रवाह की आवश्यकता नहीं थी: छिपा हुआ। धन्यवाद

— स्टिंकटैट

Answer 4

कुछ इस तरह:

p
{
    display:inline;
}

अपनी स्टाइलशीट में यह सभी पी टैग के लिए करना होगा।

Answer 5

फ्लेक्सबॉक्स काम करता है।

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items:center;
  border:1px solid #e3f2fd;
}
.item{
  flex: 1 1 auto;
  border:1px solid #ffebee;
}

<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
</div>