সিএসএস স্প্যানের প্রস্থ স্থির fixed

381

একটি আনর্ডর্ডার্ড তালিকার মধ্যে:

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

একটি শ্রেণি বা শৈলীর বৈশিষ্ট্য যুক্ত করার অনুমতি থাকলেও পাঠ্যকে প্যাড করা এবং ট্যাগ সংযোজন বা পরিবর্তন করার অনুমতি নেই।

পৃষ্ঠাটি কুরিয়ার নতুন দিয়ে রেন্ডার করছে।

গোলটি সারিবদ্ধ হওয়ার পরে পাঠ্য থাকা উচিত have

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

"ওআর" এর ন্যায়সঙ্গত গুরুত্বহীন।

অলস প্রাণীর পাঠ্য একটি অতিরিক্ত উপাদানে আবৃত হতে পারে তবে আমাকে ডাবল চেক করতে হবে।

html  css 
— জেসন সালডো
সূত্র

উত্তর:

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>
স্নিপেট প্রসারিত করুন

ইইন যেমন বলেছিল, আপনার "খালি" স্প্যানগুলিতে একটি অবিচ্ছিন্ন স্থান স্থাপন করা দরকার, তবে আপনি কোনও ইনলাইন উপাদানটির কোনও প্রস্থ বরাদ্দ করতে পারবেন না, কেবল প্যাডিং / মার্জিন তৈরি করুন যাতে আপনি এটি ভাসিয়ে তুলতে পারেন যাতে আপনি পারেন এটি একটি প্রস্থ দিন।

জাসফিল্ড উদাহরণের জন্য দেখুন http://jsfiddle.net/laurensrietveld/JZ2Lg/

— স্টিফেন ক্যালওয়েল
সূত্র
1
<span> ডিফল্টরূপে একটি ইনলাইন উপাদান - এবং ভাসমান এটির প্রস্থ দেয় না।
— কোডিনথেহোল
56
ভাসমান সম্পত্তি একটি "ব্লক বাক্স" উত্পন্ন করে যার প্রস্থ থাকে।
— স্টিফেন
83
এটি হওয়া উচিত diplay: inline-block; width: 32px;বেশিরভাগ আধুনিক ব্রাউজারে করা উচিত।
— পাওলো বুয়েনো
2
@ র্যান্ডি মার্শ - না, প্রস্থের সম্পত্তিটির কেবলমাত্র একটি প্রভাব আছে কারণ উপরের স্টিফেন ক্যালডওয়েল বর্ণিত হিসাবে ভাসমান সম্পত্তি একটি উপাদানটিকে ব্লক প্রদর্শনে পরিবর্তন করে।
— কোডিনথেহোল
14
@ পাওলো বুয়েনো diplayআপনি পড়তে পরিবর্তন করতে পারবেন, বিটিডাব্লু display, এটি আমার পক্ষে কাজ করে। ধন্যবাদ
— বাসরত
507

একটি আদর্শ বিশ্বে আপনি কেবল নিম্নলিখিত সিএসএস ব্যবহার করে এটি অর্জন করতে পারবেন

<style type="text/css">

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

</style>

এটি FF2 এবং নীচে সমস্ত ব্রাউজারে কাজ করে।

ফায়ারফক্স 2 এবং নিম্নতর এই মানটিকে সমর্থন করে না। আপনি-মোজ-ইনলাইন-বাক্সটি ব্যবহার করতে পারেন তবে সচেতন হন যে এটি ইনলাইন-ব্লকের মতো নয় এবং এটি কিছু পরিস্থিতিতে আপনার প্রত্যাশার মতো কাজ করতে পারে না।

Quirksmode থেকে নেওয়া উদ্ধৃতি

— codeinthehole
সূত্র
1
@ নিকোলাস পিকারিং .. কীভাবে ডাব্লুএইচটিএমল্টপডিএফ?
— কোডিনথেহোল
এইচএম, নিশ্চিত নয় এটি কেবল একটি সামান্য ধাক্কা। পছন্দসই প্রভাব পেতে টেবিলগুলি ব্যবহার করে শেষ হয়েছে।
— নিকোলাস পিকিংয়ে
ঠিক আছে, আপনার যদি কখনও CSS3 এর সাথে সামঞ্জস্যপূর্ণ কিছু প্রয়োজন হয় তবে আমি wkhtmltopdf এর প্রস্তাব দিতে পারি।
— কোডিনথহোল
7
এদিকে, 10 বছর পরে, এটি অবশ্যই যাওয়ার উপায়।
— vog
19

দুর্ভাগ্যক্রমে ইনলাইন উপাদানগুলি (বা প্রদর্শিত উপাদান: ইনলাইন) প্রস্থের সম্পত্তিটিকে উপেক্ষা করে ignore পরিবর্তে আপনার ভাসমান ডিভ ব্যবহার করা উচিত:

<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
এটি একটি দুর্দান্ত সমাধান। ভাসমান ডিভগুলি স্প্যানগুলির অনুভূমিকভাবে রেখার সাথে সাথে সম্পর্কিত আচরণগুলি নকল করে। পরিষ্কারটি মনে রাখা গুরুত্বপূর্ণ: উভয় লাইন বিরতি। এই প্রসঙ্গে টেবিলগুলি এড়ানোর এক দুর্দান্ত উপায়।
— আর্টুর
আমি বুঝতে পারি না, বোতামটি ইনলাইন বা ইনলাইন-ব্লক উপাদান, কেন "প্রস্থ" এটি প্রয়োগ করবে? বাটন কি মনে হচ্ছে কোন ইনলাইন উপাদান মত? সমস্ত এইচটিএমএল উপাদানগুলির ডিফল্ট "প্রদর্শন" বৈশিষ্ট্যগুলি দেখানো কোনও ডক আছে?
— 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>
— অ্যারন পাওয়েল
সূত্র
না, আমি মনে করি না এটি কাজ করে। "কিছু" পরের লাইনে যায়। এবং এখানে একটি অনুপস্থিত "<" আছে
— ব্যবহারকারীর 1537366
আমি যেমন বলেছি, এটি কাজ করে না! Jsfiddle.net/m156a0qp দেখুন । এছাড়াও, সমস্ত স্প্যান উপাদানগুলির সিএসএসের সাথে হস্তক্ষেপ করা কখনই ভাল নয়!
— ব্যবহারকারী 1537366
4 
<style type="text/css">

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

</style>

ইনলাইন উপাদানগুলির জন্য প্রস্থ নির্ধারণের জন্য আপনি এই পদ্ধতিটি করতে পারেন

— অগাস্টাস ফ্রান্সিস
সূত্র
2

লোকেরা এই ক্ষেত্রে স্প্যান করতে পারে না এটি একটি ব্লক উপাদান হতে পারে কারণ লি উপাদানগুলির মধ্যে থাকা বাক্যটি নীচে চলে যাবে। এছাড়াও ফ্লোট ব্যবহার করা খুব খারাপ ধারণা কারণ আপনাকে পুরো লি উপাদানটির জন্য প্রস্থ নির্ধারণ করতে হবে এবং এই প্রস্থটি পুরো উল উপাদান বা অন্যান্য ধারকগুলির প্রস্থের সমান হওয়া দরকার।

এইচটিএমএলে এর মতো কিছু ব্যবহার করে দেখুন:

<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; সুতরাং এটি উপরের বামে থাকে এবং স্প্যান উপাদানগুলির জন্য এই বিনামূল্যে স্থান নির্ধারণ করতে আপনি প্যাডিং-বাম (বা: প্যাডিং: 0 পিক্স 0 পিক্স 0 পিক্স 80px;) সেট করেন।

সাধারণ ক্ষেত্রে এটি আরও ভালভাবে কাজ করা উচিত।

— Arturro
সূত্র
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>
স্নিপেট প্রসারিত করুন

পিএস: আমি tabক্লাস সংজ্ঞায়িত করেছি কারণ ul li spanসিএসএস নির্বাচক আমার পিসিতে কাজ করছে না!

— schlebe
সূত্র
একটি & 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>

নোট করুন যে এটি আপনি যেমন চান ঠিক তেমন প্রদর্শন করে না, কারণ এটি প্রতিটি বিকল্পে লাইন পরিবর্তন করে। তবে আমি আশা করি যে এটি আপনাকে উত্তরের নিকটে আসতে সহায়তা করে।

— luiscubal
সূত্র
-1

ঠিক আছে, সর্বদা নিষ্ঠুর বল পদ্ধতি আছে:

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

বা আপনি কি "প্যাডিং" পাঠ্যটি বোঝাতে চেয়েছিলেন? এটি এই প্রসঙ্গে একটি অস্পষ্ট কাজ।

এটি হোমওয়ার্ক প্রশ্নের মতো ধরণের মনে হচ্ছে। আমি আশা করি আপনি কি আপনার জন্য আপনার বাড়ির কাজটি করার চেষ্টা করছেন না?

— eaolson
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.