सीएसएस ने एक अवधि में चौड़ाई तय की


381

एक अनियंत्रित सूची के भीतर:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

एक वर्ग या शैली विशेषता जोड़ने की अनुमति है लेकिन पाठ को पैडिंग और टैग जोड़ने या बदलने की अनुमति नहीं है।

पेज कूरियर न्यू के साथ प्रतिपादन कर रहा है।

लक्ष्य को पंक्तिबद्ध करने के बाद पाठ होना चाहिए।

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

"या" का औचित्य महत्वहीन है।

आलसी पशु पाठ एक अतिरिक्त तत्व में लपेटा जा सकता है, लेकिन मुझे दोहरी जांच करनी होगी।

जवाबों:


427

ul {
  list-style-type: none;
  padding-left: 0px;
}

ul li span {
  float: left;
  width: 40px;
}
<ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul>

जैसे इयोन ने कहा, आपको अपने "खाली" स्पैन में एक गैर-ब्रेकिंग स्पेस डालने की आवश्यकता है, लेकिन आप इनलाइन तत्व को चौड़ाई नहीं दे सकते हैं, केवल पैडिंग / मार्जिन है, इसलिए आपको इसे फ्लोट करने की आवश्यकता होगी ताकि आप कर सकें इसे चौड़ाई दें।

Jsfiddle उदाहरण के लिए, http://jsfiddle.net/laurensrietveld/JZ2Lg/ देखें


1
<span> डिफ़ॉल्ट रूप से एक इनलाइन तत्व है - और इसे तैरने से यह चौड़ाई नहीं देगा।
कोडिन्थेहोल

56
फ्लोट संपत्ति एक "ब्लॉक बॉक्स" उत्पन्न करती है जिसमें एक चौड़ाई होती है।
स्टीफन कैल्डवेल

83
क्या ऐसा होना चाहिए diplay: inline-block; width: 32px;अधिकांश आधुनिक ब्राउज़रों में।
पाउलो ब्यूनो

2
@ रंडी मार्श - नहीं, चौड़ाई की संपत्ति पर केवल एक प्रभाव पड़ता है क्योंकि फ्लोट संपत्ति तत्व को ब्लॉक डिस्प्ले में बदल देती है, जैसा कि स्टीफन कैल्डवेल ऊपर वर्णित है।
कोडिंथेहोल

14
@PauloBueno आप diplayपढ़ने के लिए बदल सकते हैं display, BTW, यह मेरे लिए काम करता है। धन्यवाद
बसर

507

एक आदर्श दुनिया में आप इसे निम्नलिखित सीएसएस का उपयोग करके प्राप्त करेंगे

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

यह FF2 और नीचे के अलावा सभी ब्राउज़रों पर काम करता है।

फ़ायरफ़ॉक्स 2 और लोअर इस मूल्य का समर्थन नहीं करते हैं। आप -मोज़-इनलाइन-बॉक्स का उपयोग कर सकते हैं, लेकिन ध्यान रखें कि यह इनलाइन-ब्लॉक के समान नहीं है, और यह कुछ स्थितियों में अपेक्षा के अनुरूप काम नहीं कर सकता है।

Quirksmode से लिया गया उद्धरण


1
@ निकोलसपाक .. कैसे wttmltopdf के बारे में?
कोडिनथेले

हम्म, यकीन नहीं होता। यह सिर्फ एक मामूली झटका है। वांछित प्रभाव प्राप्त करने के लिए तालिकाओं का उपयोग करने के लिए समाप्त हो गया।
निकोलस पिकरिंग

अगर आपको कभी ऐसी कोई चीज़ चाहिए जो CSS3 के अनुरूप हो, तो मैं wkhtmltopdf की सिफारिश कर सकता हूँ।
कोडिन्थेहोल

7
इस बीच, 10 साल बाद, यह निश्चित रूप से जाने का रास्ता है।
वॉग

19

दुर्भाग्य से इनलाइन तत्व (या प्रदर्शन वाले तत्व: इनलाइन) चौड़ाई की संपत्ति की अनदेखी करते हैं। आपको इसके बजाय फ्लोटिंग डिव का उपयोग करना चाहिए:

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

अब मुझे लगता है कि आपको स्पैन और सूची का उपयोग करने की आवश्यकता है, इसलिए हमें इसे थोड़ा फिर से लिखना होगा:

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>

3
यह एक महान समाधान है। फ़्लोटिंग divs spans के अभिप्राय व्यवहार की नकल करते हैं क्योंकि वे क्षैतिज रूप से ऊपर पंक्तिबद्ध होते हैं। स्पष्ट याद रखना महत्वपूर्ण है: दोनों लाइन ब्रेक। यह इस संदर्भ में तालिकाओं से बचने का एक शानदार तरीका है।
आर्टूर

मुझे समझ नहीं आ रहा है, बटन इनलाइन या इनलाइन-ब्लॉक एलिमेंट है, इस पर "चौड़ाई" क्यों लागू होगी? बटन इनलाइन तत्व की तरह लगता है? क्या सभी html तत्व के डिफ़ॉल्ट "प्रदर्शन" गुणों को दिखाने वाला कोई डॉक्टर है?
GMsoF

14

<span>टैग करने के लिए सेट करने की आवश्यकता होगी display:blockके रूप में यह एक इनलाइन तत्व है और चौड़ाई ध्यान नहीं देगा।

इसलिए:

<style type="text/css"> span { width: 50px; display: block; } </style>

और फिर:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

नहीं, मुझे नहीं लगता कि यह काम करता है। "कुछ" अगली पंक्ति में जाता है। और एक लापता "<" है
user1537366

जैसा कि मैंने कहा, यह काम नहीं करता है! Jsfiddle.net/m156a0qp देखें । इसके अलावा, सभी स्पैन तत्वों के सीएसएस के साथ मध्यस्थता करना कभी भी अच्छा नहीं है!
user1537366

4
<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

इनलाइन तत्वों के लिए चौड़ाई निर्दिष्ट करने के लिए आप यह विधि कर सकते हैं


2

इस मामले में लोग एक खंड तत्व हो सकते हैं, क्योंकि झूठे तत्वों के बीच का बाकी पाठ नीचे चला जाएगा। इसके अलावा फ्लोट का उपयोग करना बहुत बुरा विचार है क्योंकि आपको पूरे ली एलिमेंट के लिए चौड़ाई सेट करने की आवश्यकता होगी और इस चौड़ाई को पूरे एल एल तत्व या अन्य कंटेनर की चौड़ाई के समान होना चाहिए।

HTML में कुछ इस तरह आज़माएँ:

<li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span>  <strong>The</strong> active goldfish.</li>

और सीएसएस में

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

इसलिए, जब ली एलिमेंट सापेक्ष होता है, तो आप स्पैन एलिमेंट को पूर्ण और शीर्ष पर होने के लिए फॉर्मेट करते हैं: 0; लेफ्ट: 0; इसलिए यह ऊपरी बाईं ओर रहता है और आप पैडिंग-लेफ्ट (या: पेडिंग: 0px 0px 0px 0px 80px;) को स्पैन एलिमेंट के लिए सेट करते हैं।

यह सरल मामलों के लिए बेहतर काम करना चाहिए।



1

एचटीएमएल 5.0 का उपयोग करना, यह पाठ खंड के ठीक चौड़ाई का उपयोग कर के लिए संभव है <span>या <div>

यहां छवि विवरण दर्ज करें

इसके लिए <span>, जो महत्वपूर्ण है वह निम्नलिखित सीसीएस लाइन को जोड़ना है

display: inline-block;

अपने खाली के लिए <span>जो महत्वपूर्ण है वह है &nbsp;अंतरिक्ष को जोड़ना ।

मेरा कोड निम्नलिखित है

body
	{
	font-family: Arial;
	font-size:20px;
	}

div
	{
	width:200px;
	font-size:80px;
	background-color: lime;
	}
div span
	{
	display:block;
	width:200px;
	background-color: lime;
	}

ul li span
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
span.tab
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>

PS: मैंने tabक्लास को परिभाषित किया है क्योंकि ul li spanCSS चयनकर्ता मेरे पीसी पर काम नहीं कर रहा है!


सम्मिलित करना & nbsp; मेरे लिए क्या काम कर रहा था!
एड्रिएन ले कोयर

0

आप इसे एक तालिका का उपयोग करके कर सकते हैं, लेकिन यह शुद्ध सीएसएस नहीं है।

<style>
ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

ध्यान दें कि यह बिल्कुल वैसा प्रदर्शित नहीं होता जैसा आप चाहते हैं, क्योंकि यह प्रत्येक विकल्प पर लाइन स्विच करता है। हालाँकि, मुझे उम्मीद है कि इससे आपको उत्तर के करीब आने में मदद मिलेगी।


-1

खैर, वहाँ हमेशा जानवर बल विधि है:

<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>

या यह कि आपको पाठ को "पैडिंग" से क्या मतलब था? इस संदर्भ में यह एक अस्पष्ट कार्य है।

यह एक होमवर्क प्रश्न की तरह लगता है। मुझे आशा है कि आप हमें आपके लिए अपना होमवर्क करने की कोशिश नहीं कर रहे हैं?


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.