আমি কীভাবে কোনও লেবেল ট্যাগের প্রস্থ নিয়ন্ত্রণ করতে পারি?

Question

লেবেল ট্যাগটির সম্পত্তি 'প্রস্থ' নেই, সুতরাং আমি কীভাবে একটি লেবেল ট্যাগের প্রস্থ নিয়ন্ত্রণ করব?

Comments

লেবেল একটি ইনলাইন উপাদান, এটির প্রস্থের মান থাকতে পারে না; এটি করার জন্য আপনার প্রয়োজন display:blockবা রাখা দরকার float:left।

— রাসেল ডায়াস

Answer 1

সিএসএস ব্যবহার করে অবশ্যই ...

label { display: block; width: 100px; }

widthঅ্যাট্রিবিউট নিন্দা করা হয়েছে, এবং CSS সবসময় প্রেজেন্টেশন শৈলীর এই ধরনের নিয়ন্ত্রণ করতে ব্যবহার করা উচিত।

Comments

কিন্তু কোডে একটি বিরতি, যা সম্ভবত হয় বিশালাকার ওপি যে কি না প্রথম স্থানে চাই।

— কনরাড রুডল্ফ

@ কনরাড তারপরে ওপি ব্যবহার করতে পারে floatবাdisplay: inline-block

— জোশ স্টোডোলা

হ্যাঁ, আমি এটাই পেতে চাই। :-) এটি এখানে মূল দিক, কারণ এটি কঠিন অংশ। কেবলমাত্র সেটিং এর widthখুব বেশি ব্যবহার হবে না।

— কনরাড রুডল্ফ

@ জোস্ট স্টোডোলা ওহ শিইইইইটি ..... ইনলাইন-ব্লক কখনও আমার পক্ষে কাজ করত না, আমি চেষ্টা করলাম ভাসা এবং ভ্যাম! আমি ভাবছি কেন ইনলাইন-ব্লকটি আমার পক্ষে কাজ

— করেনি

@ লেস্টচাইল্ড ইনলাইন-ব্লক হোয়াইটস্পেসকে উপেক্ষা করে না, এ কারণেই আপনি এটি নিয়ে সমস্যায় পড়েছিলেন।

— অ্যালেক্স পডওয়ার্নি

Answer 2

ইনলাইন-ব্লকটি ব্যবহার করা আরও ভাল কারণ এটি অবশিষ্ট উপাদান এবং / অথবা নিয়ন্ত্রণগুলি একটি নতুন লাইনে আঁকতে বাধ্য করে না।

label {
  width:200px;
  display: inline-block;
}

Answer 3

ইনলাইন উপাদানগুলি (যেমন স্প্যান, ল্যাবেল ইত্যাদি) প্রদর্শিত হয় যাতে ব্রাউজারের মাধ্যমে তাদের সামগ্রীর উপর ভিত্তি করে তাদের উচ্চতা এবং প্রস্থ গণনা করা হয়। আপনি যদি উচ্চতা এবং প্রস্থ নিয়ন্ত্রণ করতে চান তবে আপনাকে সেই উপাদানগুলির ব্লকগুলি পরিবর্তন করতে হবে।

display: block;উপাদানটিকে একটি শক্ত ব্লক হিসাবে প্রদর্শিত হয় (ডিআইভি ট্যাগগুলির মতো) যার অর্থ হল যে উপাদানটির পরে লাইন বিরতি রয়েছে (এটি ইনলাইন নয়)। যদিও আপনি display: inline-blockলাইন ব্রেকের ইস্যুটি ঠিক করতে ব্যবহার করতে পারেন , এই সমাধানটি আই 6 তে কাজ করে না কারণ আই 66 ইনলাইন-ব্লককে স্বীকৃতি দেয় না। আপনি যদি এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হতে চান তবে এই নিবন্ধটি দেখুন: http://webjazz.blogspot.com/2008/01/getting-inline- block-working- across.html

Answer 4

লেবেলে প্রস্থ দেওয়া কোনও সঠিক উপায় নয়। এটি পরিচালনা করতে আপনার একটি ডিভ বা টেবিল কাঠামো নেওয়া উচিত। তবে এখনও যদি আপনি আপনার পুরো কোডটি পরিবর্তন করতে না চান তবে আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন।

label {
  width:200px;
  float: left;
}

Comments

কোনও লেবেলের উপাদানটির প্রস্থকে "সঠিকভাবে নয় লেবেলকে প্রস্থ দেওয়া"? তুমি কি নিশ্চিত?

— ওরিওল

হ্যাঁ .. কারণ যখন আমরা কিছু বিন্যাস বা নির্দিষ্ট কাঠামো তৈরি করতে চাই তখন ডিভ এবং সারণীর বৈশিষ্ট্যগুলি ব্যবহারের জন্য সরবরাহ করা হয়। লেবেল প্রস্থ বা উচ্চতা দেওয়ার জন্য নয় ... তাই আমরা যদি এমন কোনও কিছু ব্যবহার করি যা এরকম বোঝানো হয় না .. এটি কোনওভাবে সমস্যা তৈরি শুরু করবে start আমি আশা করি আমি এখন বুঝতে পারি।

— ইয়াক্সিটা শাহ

Answer 5

label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}

Answer 6

আপনি অবশ্যই এইভাবে চেষ্টা করতে পারেন

.col-form-label{
  display: inline-block;
  width:200px;}

Answer 7

আপনি হয় সমস্ত লেবেলে শ্রেণীর নাম দিতে পারেন যাতে সকলের একই প্রস্থ থাকতে পারে:

 .class-name {  width:200px;}

উদাহরণ

.labelname{  width:200px;}

বা আপনি সহজ লেবেল বাকি দিতে পারেন

label {  width:200px;  display: inline-block;}