क्या सीएसएस के साथ एक तलाक के बाद एक लाइन ब्रेक को रोकने का एक तरीका है?
उदाहरण के लिए मेरे पास है
<div class="label">My Label:</div>
<div class="text">My text</div>और इसे प्रदर्शित करने के लिए चाहते हैं:
मेरा लेबल: मेरा पाठ
जवाबों:
display:inline;
या
float:left;
या
display:inline-block; - सभी ब्राउज़रों पर काम नहीं हो सकता है।
divयहाँ उपयोग करने का उद्देश्य क्या है ? मैं एक सुझाव देना चाहूंगा span, क्योंकि यह एक इनलाइन-स्तरीय तत्व है, जबकि divएक ब्लॉक-स्तरीय तत्व है।
ध्यान दें कि ऊपर दिया गया प्रत्येक विकल्प अलग तरीके से काम करेगा।
display:inline;divएक के बराबर में बदल जाएगा span। यह कोई असर नहीं पड़ेगा margin-top, margin-bottom, padding-top, padding-bottom, height, आदि
float:left;divएक ब्लॉक-स्तरीय तत्व के रूप में रहता है । यह अभी भी जगह लेगा जैसे कि यह एक ब्लॉक था, हालांकि चौड़ाई सामग्री (मानने width:auto;) के लिए फिट होगी । इसके clear:left;लिए कुछ प्रभावों की आवश्यकता हो सकती है ।
display:inline-block;"दोनों दुनिया के सर्वश्रेष्ठ" विकल्प है। divएक ब्लॉक तत्व के रूप में व्यवहार किया जाता है। यह सभी के लिए प्रतिक्रिया करता है margin, paddingऔर heightके रूप में एक ब्लॉक तत्व के लिए उम्मीद नियम। हालांकि, इसे अन्य तत्वों के भीतर प्लेसमेंट के उद्देश्य के लिए एक इनलाइन तत्व के रूप में माना जाता है।
अधिक जानकारी के लिए इसे पढ़ें ।
divतत्वों ब्लॉक तत्व हैं, तो डिफ़ॉल्ट रूप से वे पूर्ण उपलब्ध चौड़ाई upp ले।
एक तरीका उन्हें इनलाइन तत्वों में बदलना है:
.label, .text { display: inline; }यह spanतत्वों के बजाय तत्वों का उपयोग करने के समान प्रभाव होगा div।
एक अन्य तरीका तत्वों को तैराना है:
.label, .text { float: left; }यह बदल जाएगा कि तत्वों की चौड़ाई कैसे तय की जाती है, ताकि thwy केवल उनकी सामग्री के रूप में व्यापक हो। यह तत्वों को एक-दूसरे के बगल में तैरते हुए भी दिखाएगा, इसी तरह कि कैसे छवियां एक-दूसरे के बगल में बहती हैं।
आप तत्वों को बदलने पर भी विचार कर सकते हैं। divतत्व दस्तावेज़ डिवीजनों के लिए करना है, मैं आमतौर पर एक का उपयोग labelऔर एक spanइस तरह एक निर्माण के लिए तत्व:
<label>My Label:</label>
<span>My text</span>Div का उपयोग किसी वेबसाइट को संरचना देने या बहुत सारे पाठ या तत्वों को शामिल करने के लिए किया जाता है, लेकिन आप उन्हें लेबल के रूप में उपयोग करते हैं, आपको स्पैन का उपयोग करना चाहिए, यह प्रत्येक टेक्स्ट के बगल में दोनों पाठ स्वचालित रूप से डाल देगा और आपको राइट करने की आवश्यकता नहीं होगी इसके लिए css कोड।
और यहां तक कि अगर अन्य लोग आपको तत्वों को तैरने के लिए कहते हैं तो यह सबसे अच्छा है कि आप केवल टैग बदल दें।
clear:noneलेबल पर css विशेषता को लागू करने का प्रयास करें ।
.label {
clear:none;
}divअभी भी डिफ़ॉल्ट width:autoहै जो इसे सभी उपलब्ध चौड़ाई तक ले जाता है।
मैं कई बार उनके बाद डिव के बिना लाइन ब्रेक पाने में सफल रहा हूं, फ्लोट सीएसएस विशेषता और चौड़ाई सीएसएस विशेषता के साथ खेलकर।
निश्चित रूप से समाधान के बाद आपको सभी ब्राउज़रों में इसका परीक्षण करना होगा, और प्रत्येक ब्राउज़र में आपको यह सुनिश्चित करने के लिए खिड़कियों को फिर से आकार देना होगा कि यह सभी परिस्थितियों में काम करता है।