কীভাবে চেকবাক্সগুলি এবং তাদের লেবেলগুলি ক্রমাগত ব্রাউজারগুলিতে সারিবদ্ধ করা যায়

Question

এটি একটি ছোট ছোট সিএসএস সমস্যা যা আমাকে ক্রমাগত জর্জরিত করে। স্ট্যাক ওভারফ্লো এর আশেপাশের লোকেরা কীভাবে উলম্বভাবে সারিবদ্ধ হয় checkboxesএবং তাদের labelsক্রমাগত ক্রস ব্রাউজার হয় ? আমি যখনই সেগুলি সাফারিতে (সাধারণত ব্যবহার vertical-align: baselineকরে input) সঠিকভাবে প্রান্তিক করি তখন সেগুলি ফায়ারফক্স এবং আইইতে সম্পূর্ণ বন্ধ থাকে। এটি ফায়ারফক্সে ঠিক করুন এবং সাফারি এবং আইটি অবশ্যম্ভাবীভাবে গণ্ডগোল করে। আমি যখনই কোনও ফর্ম কোড করি তখন প্রতি সময় নষ্ট করি।

আমি যে স্ট্যান্ডার্ড কোড নিয়ে কাজ করি তা এখানে:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

আমি সাধারণত এরিক মায়ারের রিসেট ব্যবহার করি, সুতরাং ফর্ম উপাদানগুলি ওভাররাইডগুলি তুলনামূলকভাবে পরিষ্কার। আপনাকে যে কোনও টিপস বা কৌশল সরবরাহ করতে হবে তার প্রত্যাশায়!

Comments

প্রতিটি চেকবক্স এবং লেবেলকে <li> উপাদানটির মধ্যে রাখুন। ওভারফ্লো যুক্ত করুন: <li> এ লুকানো আছে এবং লেবেল এবং চেকবক্সটি বামে ভাসাবেন। তারপরে তারা সকলেই পুরোপুরি সূক্ষ্মভাবে সারিবদ্ধ হয়। স্পষ্টতই লেবেল উপাদানটির মধ্যে চেকবাক্সটি রাখবেন না।

— ভলিউম এক

আমি এটি ব্যবহার করে heightএবং line-heightগুণাবলী দ্বারা এটি অর্জন করেছি , jsfiddle.net/wepw5o57/3

— TheGr8_Nik

সঙ্গে ম্যানিপুলেশন positionএবং top: এই সমস্যা উদাহরণ সমাধান হবে jsfiddle.net/ynkjc22s

— Profesor08

2019. এখনও একই সমস্যা। এটি কাজ করতে এখনও কিছু হ্যাক দরকার :(

— ডাইটার

@ ডিটার আমার উত্তর দেখুন, আমি ব্যাখ্যা করেছি যে হ্যাকগুলির প্রয়োজন কেন এবং কী পদ্ধতির ব্যবহার

— 3995261

Answer 1

এক ঘন্টা ধরে টুইট করার পরে, পরীক্ষা করে দেখার জন্য, এবং বিভিন্ন স্টাইলের মার্কআপটি চেষ্টা করার পরে, আমি মনে করি আমার একটি শালীন সমাধান হতে পারে। এই বিশেষ প্রকল্পের প্রয়োজনীয়তাগুলি হ'ল:

1. ইনপুটগুলি অবশ্যই তাদের নিজস্ব লাইনে থাকতে হবে।
2. চেকবাক্স ইনপুটগুলি সমস্ত ব্রাউজারে একইভাবে লেবেল পাঠ্যের সাথে উল্লম্বভাবে সারিবদ্ধ হওয়া প্রয়োজন (যদি না অভিন্নভাবে হয়)।
3. যদি লেবেলের পাঠ্যটি মোড়ানো হয় তবে এটিকে ইন্টেন্ট করা দরকার (সুতরাং চেকবক্সের নীচে মোড়ক দেওয়া হবে না)।

আমি কোনও ব্যাখ্যা দেওয়ার আগে, আমি আপনাকে কেবল কোডটি দেব:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

এখানে জেএসফিডেলের কাজের উদাহরণ ।

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

বিষয়গুলি নোট করুন:

• *overflowঘোষণা একটি ইনলাইন ইন্টারনেট হ্যাক (তারকা সম্পত্তি হ্যাক) হয়। IE 6 এবং 7 উভয়ই এটি লক্ষ্য করবে, তবে সাফারি এবং ফায়ারফক্স এটিকে যথাযথভাবে উপেক্ষা করবে। আমি মনে করি এটি বৈধ সিএসএস হতে পারে তবে আপনি শর্তাধীন মন্তব্য সহ আরও ভাল হন; এটি কেবল সরলতার জন্য ব্যবহার করেছেন।
• সেরা হিসাবে আমি বলতে পারি, vertical-alignব্রাউজার জুড়ে একমাত্র বিবৃতি ছিল সামঞ্জস্যপূর্ণ vertical-align: bottom। এটিকে সেট করে এবং তারপরে তুলনামূলকভাবে উপরে উপরে অবস্থান করা প্রায় সাফারি, ফায়ারফক্স এবং আইইয়ের সাথে কেবলমাত্র পিক্সেল বা দু'জনের তাত্পর্যপূর্ণ আচরণ করে।
• প্রান্তিককরণের সাথে কাজ করার ক্ষেত্রে সবচেয়ে বড় সমস্যাটি হ'ল আইই ইনপুট উপাদানগুলির চারপাশে একগুচ্ছ রহস্যময় স্থান নিয়ে যায়। এটি প্যাডিং বা মার্জিন নয়, এবং এটি অবিরত ধর্ষণ করা। চেকবক্সে প্রস্থ এবং উচ্চতা নির্ধারণ এবং তারপরে overflow: hiddenকোনও কারণে অতিরিক্ত স্থানটি কেটে দেয় এবং আইআই এর অবস্থান সাফারি এবং ফায়ারফক্সের সাথে একইভাবে কাজ করতে দেয়।
• আপনার পাঠ্য আকারের উপর নির্ভর করে আপনার অবশ্যই সন্দেহজনকভাবে জিনিস ঠিক করার জন্য আপেক্ষিক অবস্থান, প্রস্থ, উচ্চতা এবং আরও সামঞ্জস্য করতে হবে।

আশাকরি ইহা অন্য কারো সাহায্য করবে! আমি আজ সকালে যে কাজটি করেছি তার ব্যতীত অন্য কোনও প্রকল্পের জন্য আমি এই নির্দিষ্ট কৌশলটি ব্যবহার করে দেখিনি, তাই আপনি যদি আরও কিছু ধারাবাহিকভাবে কাজ করে এমন কিছু খুঁজে পান তবে অবশ্যই পাইপ আপ করুন।

Comments

বিঃদ্রঃ. এটি সম্ভবত সমস্ত ব্রাউজার এবং পাঠ্য পাঠকের জন্য কাজ করে তা নিশ্চিত করার জন্য আপনার লেবেলে একটি "জন্য" বৈশিষ্ট্য রাখা উচিত। (আমি বুঝতে পারি আপনি সম্ভবত এটি সরলতার জন্য রেখে গেছেন)

— আর্মস্ট্রোনস্ট

দুঃখের বিষয়, আমি বুঝতে পারি নি যে কয়জন লোক এ সম্পর্কে অজ্ঞ ছিল: আপনি যদি লেবেল ট্যাগটিতে ইনপুটটি মোড়ানো থাকেন তবে "for" গুণটি অপ্রয়োজনীয়। নিজের জন্য নির্দ্বিধায় দেখুন: w3.org/TR/html401/interact/forms.html#h-17.9.1

— ওয়ান

শর্তযুক্ত মন্তব্য ব্যবহার সম্পর্কে পরামর্শের সাথে আমি একমত নই। * Foobar সিএসএস হ্যাক রাখুন। এটি ভালভাবে কাজ করে, ওয়াইউআই এর মতো ফ্রেমওয়ার্ক দ্বারা ব্যবহৃত হয় এবং আপনাকে যা একসাথে থাকে তা একত্রে রাখার অনুমতি দেয়।

— এরবুচেজ

চেষ্টা করা হয়েছে এটি ক্রোম 28, ম্যাক ওএসএক্স-এ রয়েছে এবং চেকবক্সটি পাঠ্যের চেয়ে দৃশ্যমানভাবে কম রয়েছে

— MusikAnimal

দ্রষ্টব্য, এটি Chrome এর সর্বশেষতম সংস্করণগুলিতে কাজ করতে দেখা যাচ্ছে না (আমি v36 ব্যবহার করছি)। i.imgur.com/y9Ffxsh.png সম্পাদনা করুন: না ফায়ারফক্স (v31)

— হ্যান্স

Answer 2

কখনও কখনও উলম্ব-সারিবদ্ধভাবে সঠিকভাবে কাজ করতে একে অপরের পাশে দুটি ইনলাইন (স্প্যান, লেবেল, ইনপুট, ইত্যাদি ...) প্রয়োজন হয়। নীচের চেকবাক্সগুলি যথাযথভাবে IE, সাফারি, এফএফ এবং ক্রোমে কেন্দ্রীভূত, যদিও পাঠ্যের আকার খুব ছোট বা বড় is

এগুলি সমস্ত একই লাইনে একে অপরের পাশে ভেসে বেড়ায় তবে নোর্যাপের অর্থ হ'ল পুরো লেবেল পাঠ্যটি সর্বদা চেকবাক্সের পাশে থাকে।

ডাউনসাইড হ'ল অতিরিক্ত অর্থহীন স্প্যান ট্যাগ।

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

এখন, যদি আপনার খুব দীর্ঘ লেবেল পাঠ্য থাকে যা চেকবক্সের নীচে মোড়ক ছাড়া মোড়ানোর দরকার পড়ে , আপনি লেবেল উপাদানগুলিতে প্যাডিং এবং নেতিবাচক পাঠ্য ইনডেন্ট ব্যবহার করতে পারবেন:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Comments

ধন্যবাদ! ইনপুট এবং স্প্যান উভয়টিতে "উল্লম্ব-সারিবদ্ধ: মাঝারি" আমার জন্য দুর্দান্ত কাজ করেছে।

— উইলিয়াম গ্রস

display: block; float: left;অপ্রয়োজনীয় বলে মনে হচ্ছে

— PHPst

আপনি যখন লেবেলের ভিতরে ইনপুট রাখেন তখন আপনাকে অ্যাট্রিবিউটের জন্য কোনও ব্যবহার করতে হবে না। এটা ছাড়া এটি কাজ।

— টমি সেরেনসেন

এটি আমার মতে গ্রহণযোগ্য উত্তর হওয়া উচিত। কোনও টুইট করার প্রয়োজন নেই।

— টিম

দুর্দান্ত এবং নিশ্চিত হওয়া এখনও ক্রোম 58 (উইন্ডোজ) এ কাজ করে (বর্তমান শীর্ষ উত্তরের থেকে ভিন্ন)।

— জেসন সি

Answer 3

বন্ধ ওয়ার্কিং এক রঙ্গিন খড়ি এর সমাধান , আমি কিছু আছে আমার জন্য কাজ করে এবং সহজ হল:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

সাফারি (যার বেসলাইন আমি বিশ্বাস করি) এবং ফায়ারফক্স এবং আই 7 উভয়ই ভাল হিসাবে পরীক্ষা করে দেখায় পিক্সেল-ফর-পিক্সেল রেন্ডাররা। এটি বড় এবং ছোট বিভিন্ন লেবেল ফন্ট আকারগুলির জন্যও কাজ করে। এখন, নির্বাচন এবং ইনপুটগুলিতে আইই এর বেসলাইন ঠিক করার জন্য ...

---

আপডেট: (তৃতীয় পক্ষ সম্পাদনা)

সঠিক bottomঅবস্থান ফন্ট-পরিবার এবং ফন্ট-আকারের উপর নির্ভর করে! আমি bottom: .08em;চেকবক্স এবং রেডিও উপাদানগুলির জন্য ব্যবহার করা ভাল সাধারণ মূল্য বলে মনে করি। আমি এটিকে ক্রিয়াল / ফায়ারফক্স / আইই ১১-তে কয়েকটি ছোট / মাঝারি / বড় ফন্ট-আকার ব্যবহার করে অ্যারিয়াল এবং ক্যালিব্রি ফন্ট সহ উইন্ডোতে পরীক্ষা করেছি।

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Comments

অন্যের জন্য কেবল একটি নোট: এটি আই 6 তে কাজ করবে না কারণ এটি [টাইপ = চেকবক্স] সিএসএস লক্ষ্যবস্তুকে সমর্থন করে না।

— ওয়ান ক্রাইওন

আইআই support সমর্থন প্রয়োজন হলে আপনি অসমর্থিত নির্বাচকদের ব্যবহারের পরিবর্তে কেবল একটি শ্রেণি যুক্ত করতে পারেন।

— হার্টলেসান

এই আমার জন্য কাজ করে। তবে, "অবস্থান: আপেক্ষিক; নীচে: 1px" সেট করার পরিবর্তে, আপনি একই ফলাফল অর্জন করতে "মার্জিন: 0 0 1px 0" ব্যবহার করতে পারেন।

— নিউম্যান

Answer 4

একটি সহজ জিনিস যা ভালভাবে কাজ করে বলে মনে হচ্ছে তা হ'ল উল্লম্ব-সারিবদ্ধের সাথে চেকবাক্সের উল্লম্ব অবস্থানটি সামঞ্জস্য করা। এটি এখনও ব্রাউজারে পৃথক হবে, তবে সমাধানটি জটিল নয়।

input {
    vertical-align: -2px;
}

উল্লেখ

Comments

অন্যান্য সকলের মধ্যে এটি ছিল সবচেয়ে ছোট পরিবর্তন, যা ব্রাউজারগুলির সাম্প্রতিক সংস্করণে আমার পক্ষে কাজ করে।

— জনি_ডি

এটি এর চেয়ে আরও ভাল কাজ করে vertical-alignএবং position: relativeকারণ এটি

— আইই

তবে এটি হরফ আকারের উপর নির্ভর করে। বড় আকারের ফন্টের জন্য এটি অবশ্যই উচ্চতর নেতিবাচক মানগুলির সাথে সামঞ্জস্য করা উচিত, যেমন: উল্লম্ব-সারিবদ্ধ: -6px;

— এসস্পার্পোশন

সম্ভবত সেট করা থাকলে এটি বিভিন্ন ফন্টের সাথে আরও ভাল কাজ করতে পারেem

— ইয়াকোভএল

Answer 5

চেষ্টা vertical-align: middle

আপনার কোডও মনে হয় এটি হওয়া উচিত:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

Comments

<label for="blah">কেবলমাত্র যদি আপনি এমন কোনও কিছু ব্যবহার করেন যেখানে লেবেলটি মোড়ানোর পক্ষে কোনও অর্থ হয় না (যেমন পাঠ্যবাক্সের মতো; আমি সাধারণত <label for="blah">Foo</label><input id="blah" type="text" />সেই উদাহরণটি ব্যবহার করব )। চেকবাক্সগুলির সাহায্যে আমি এটি মোড়ানোর জন্য কম মার্কআপ পাই।

— ওয়ান ক্রাইওন

ঠিক সত্য নয়: কেবলমাত্র চেকবক্সটিতে ক্লিক করার পাশাপাশি চেকবক্সটি চেক করতে লেবেল-ব্যবহারকারী ব্যবহারকারীদের লেবেলে ক্লিক করতে পারবেন। দুটি উপাদানকে এক সাথে বেঁধে রাখার জন্য এটি বেশ সহজ।

— বিপন্ন ম্যাসা

যদি কোনও ইনপুট কোনও লেবেলের অভ্যন্তরে বাসা বেঁধে থাকে, তবে সক্রিয়করণ সহ লেবেলটি ক্লিক করা / ইনপুটটিতে ফোকাস দিন; যখন ইনপুটটি নেস্ট করা হয় না তখন বৈশিষ্ট্যের জন্য একমাত্র ক্ষেত্রে হয়।

— ওয়ান ক্রাইওন

এটি সত্য ওয়ান ক্রাইওন, তবে "ফর" বৈশিষ্ট্যটি ব্যবহার করা এখনও ভাল অনুশীলন, বা আপনার এমন কিছু ব্রাউজারগুলির সাথে সমস্যা হবে যা এই সিনট্যাক্স কাশি আইআইকে স্বীকৃতি দেয় না ।

— আর্মস্ট্রোনজেস্ট

যদি আপনি চান না যে আপনার চেকবাক্সটির একটি আইডি আছে তবে আপনার চেকবক্সটি লেবেলের অভ্যন্তরে আবশ্যক

— সাইমন_উইভার

Answer 6

আমার সমাধানটি চেষ্টা করে দেখুন, আমি এটি 6, এফএফ 2 এবং Chrome এ চেষ্টা করেছি এবং এটি তিনটি ব্রাউজারে পিক্সেল দ্বারা পিক্সেল সরবরাহ করে।

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

Comments

মজাদার; আমি উভয় উপাদান ভাসমান ধারণা পছন্দ করি; যা মার্জিতভাবে মোড়ানোর সমস্যাটিকে ঠিক করে দেয়। আমি লেবেলের সাথে ইনপুট মোড়ানোর সাথে সংযুক্ত রয়েছি , তবে সেই কোডটি আমার কাছে পৌঁছানো সমাধানের চেয়ে অনেক ক্লিনার একটি হ্যাক।

— ওয়ান ক্রাইওন

এই উদাহরণে চেকবাক্স ইনপুট এবং

— লেবেলেও

এটিতে একটি সমস্যা রয়েছে, যদি লেবেলটি উপলব্ধ জায়গাতে ফিট না করে তবে কি হবে? লেবেল এবং চেকবক্সটি পৃথক করা হয়েছে (চেকবক্সটি ডানদিকের উপরে এবং লেবেলটি নীচে বাম)। আপনি যদি আপনার লেবেলের অভ্যন্তরে চেকবক্সটি মুড়ে ফেলে থাকেন তবে আপনার এই সমস্যা নেই।

— এনরিক

এটি পিক্সেলটিতে কাজ করে নি, তবে 3 টি প্রধান ব্রাউজারে জিনিসগুলি আরও ভাল দেখানোর জন্য এটি যথেষ্ট শালীন ছিল। আমি মনে করি এটি আরও ভালভাবে কাজ করবে তা দেখার জন্য আমি আরও এক ঘন্টা ব্যয় করতে পারতাম ...

— অ্যালেক্সিস উইলক

Answer 7

আমার একমাত্র নিখুঁতভাবে কাজ করার সমাধান হ'ল:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

ক্রোম, ফায়ারফক্স, অপেরা, আই 7 এবং 8 তে আজ পরীক্ষিত Example উদাহরণ: ফিডল

Answer 8

আমি আমার সমাধানটি পুরোপুরি পরীক্ষা করে দেখিনি, তবে এটি দুর্দান্ত কাজ করছে বলে মনে হচ্ছে।

আমার এইচটিএমএল সহজভাবে:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

তারপরে আমি সমস্ত চেকবাক্সগুলি 24pxউচ্চতা এবং প্রস্থ উভয়ের জন্য সেট করে রেখেছি । টেক্সট আমি লেবেল করা প্রান্তিককৃত করতে line-heightআরো 24pxএবং বরাদ্দ vertical-align: top;যেমন:

সম্পাদনা: আইই পরীক্ষার পরে আমি ইনপুটটিতে যুক্ত করেছি vertical-align: bottom;এবং লেবেলের সিএসএস পরিবর্তন করেছি। প্যাডিং বাছাইয়ের জন্য আপনাকে শর্তসাপেক্ষে আইএসএস ক্ষেত্রে প্রয়োজন হতে পারে - তবে পাঠ্য এবং বাক্সটি ইনলাইন রয়েছে।

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

যদি কেউ দেখতে পান যে এটি কাজ করে না, দয়া করে দয়া করে আমাকে জানান। এটি কার্যকর হয় (ক্রোম এবং আইই - - স্ক্রিনশটগুলি রেটিনাতে নেওয়া হয়েছিল এবং IE এর সমান্তরাল ব্যবহার করে)

Comments

এটি বেশ পুরানো, তবে যেহেতু আপনি আপনাকে জানাতে বলেছেন, এটি ফায়ারফক্সে ভাল কাজ করে না (চেকবক্সগুলি বেসলাইনের উপরে রয়েছে)। আপনার পোস্ট করা বিশদ ব্যাখ্যায় আপনি আগ্রহী হতে পারেন

— ইয়াকোভল

Answer 9

আমি আমার স্থির পাঠ্যের উল্লম্ব অবস্থানটি সামঞ্জস্য করতে সাধারণত লাইনের উচ্চতা ব্যবহার করি:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

আশা করি এইটি কাজ করবে.

Comments

লাইন উচ্চতা, দুহ। সবসময় একটি সম্পর্কে ভুলবেন না। ভাল কাজ, দুর্দান্ত কাজ করে।

— ক্রেগ

Answer 10

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

কৌশলটি হ'ল লেবেল ট্যাগটি ব্যবহার করে কেবল টেবিল কোষগুলিতে উল্লম্ব-সারিবদ্ধ বা ইনলাইন-ব্লক ব্যবহার করা।

Answer 11

অবশেষে সমস্যার উত্সটি একবার দেখে নেওয়া যাক

চেকবাক্সগুলি চিত্র ব্যবহার করে রেন্ডার করা হয় (কেউ CSS এর মাধ্যমে কাস্টমগুলি সেট করতে পারে)। ফায়ারফক্সে এটি একটি (যাচাই করা হয়নি) চেকবক্স রয়েছে যা ডিওএম পরিদর্শকের সাথে হাইলাইট হয়েছে:

এবং এখানে ক্রোমে একই স্টাইলহীন চেকবক্সটি রয়েছে:

আপনি মার্জিন (কমলা) দেখতে পারেন; প্যাডিং উপস্থিত নেই (সবুজ দেখানো হবে)। তাহলে ডানদিকে এবং চেকবক্সের নীচে এই সিউডো-মার্জিনটি কী? এই চেকবক্সটি জন্য ব্যবহৃত ইমেজ অংশ আছে । এজন্য কেবল ব্যবহার করা vertical-align: middleসত্যই যথেষ্ট নয় এবং এটি ক্রস ব্রাউজার সমস্যার উত্স।

সুতরাং আমরা এই সম্পর্কে কি করতে পারি?

একটি সুস্পষ্ট বিকল্প হ'ল - চিত্রগুলি প্রতিস্থাপন করুন! সৌভাগ্যক্রমে, কেউ এটি সিএসএসের মাধ্যমে করতে পারেন এবং বাহ্যিক চিত্র, বেস 64 (ইন সিএসএস) চিত্রগুলি, ইন সিএসএস এসভিজি বা কেবল ছদ্ম-উপাদানগুলির সাথে প্রতিস্থাপন করতে পারেন। এটি একটি দৃust় (ক্রস ব্রাউজার!) পদ্ধতির এবং এই প্রশ্নটি থেকে চুরি হওয়া এই জাতীয় সমন্বয়ের উদাহরণ এখানে :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

আপনি এখানে তালিকাবদ্ধ কিছু যেমন স্টাইলিং সম্পর্কে আরও কিছু গভীর-নিবন্ধ পড়তে চাইতে পারেন ; এটি এই উত্তর সুযোগ বাইরে।

ঠিক আছে, এখনও নো-কাস্টম-চিত্রগুলি বা সিউডো-উপাদানগুলির সমাধান সম্পর্কে কী?

টিএল; ডিআর: দেখে মনে হচ্ছে এটি কাজ করবে না, পরিবর্তে কাস্টম চেকবক্স ব্যবহার করুন

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

তাহলে চেকবক্সগুলিতে কি ব্রাউজারগুলির সিউডো-মার্জিন রয়েছে? আমি ক্রোম 75, ভিভালদি 2.5 (ক্রোমিয়াম-ভিত্তিক), ফায়ারফক্স 54 (কেন এত পুরানো জিজ্ঞাসা করবেন না), আইই 11, এজ 42, সাফারি পরীক্ষা করে দেখেছি ?? (এক মিনিটের জন্য ধার নেওয়া, সংস্করণটি পরীক্ষা করতে ভুলে গেছেন)। কেবল ক্রোম এবং ভিভালদীরই এমন সিউডো-মার্জিন রয়েছে (অপেরা-র মতো আমিও সমস্ত ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিকেই সন্দেহ করি)।

এই ছদ্ম-মার্জিনের আকার কী? এটি বের করার জন্য কেউ একটি জুমযুক্ত চেকবক্স ব্যবহার করতে পারেন:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

আমার ফলাফলটি প্রস্থ / উচ্চতার ~ 7% এবং সুতরাং পরম ইউনিটে 0.9-1.0px। যথার্থতাটি প্রশ্নবিদ্ধ হতে পারে, যদিও: zoomচেকবক্সের জন্য বিভিন্ন মানের চেষ্টা করুন। ক্রোম এবং ভিভালদি উভয় ক্ষেত্রেই আমার পরীক্ষাগুলিতে সিউডো-মার্জিনের আপেক্ষিক আকার zoom10, 20 এবং 11-19 (10 ) মানগুলিতে খুব আলাদা :

scale আরও সুসংগত বলে মনে হচ্ছে:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

সুতরাং সম্ভবত ~ 14% এবং 2px সঠিক মান।

এখন যেহেতু আমরা সিডো-মার্জিনের আকার জানি (?), আসুন লক্ষ্য করুন যে এটি যথেষ্ট নয়। সমস্ত ব্রাউজারের জন্য চেকবক্স আইকনের আকারগুলি কি একই? হায়! আনস্টাইলযুক্ত চেকবক্সগুলির জন্য ডিওএম পরিদর্শক কী দেখায় তা এখানে:

• ফায়ারফক্স: 13.3px
• ক্রোমিয়াম-ভিত্তিক: পুরো জিনিসটির জন্য 12.8px , সুতরাং চেকবক্স হিসাবে দৃশ্যমানভাবে অনুধাবন করা হয় তার জন্য 12.8 (100% - 14%) = 11px
• আইই 11, প্রান্ত: 13px
• সাফারি: এন / এ (এগুলি একই পর্দার সাথে তুলনা করা উচিত, আমি বিশ্বাস করি)

এখন আমরা কোনও সমাধান বা কৌশল আলোচনা করার আগে আসুন জিজ্ঞাসা করি: একটি সঠিক প্রান্তিককরণ কী? আমরা কী অর্জন করার চেষ্টা করছি? নির্দিষ্ট বিন্দুতে এটি স্বাদের বিষয় তবে মূলত আমি নিম্নলিখিত "দুর্দান্ত" প্রান্তিককরণগুলির দিকগুলি সম্পর্কে ভাবতে পারি:

একই বেসলাইনটিতে পাঠ্য এবং চেকবাক্স (আমি ইচ্ছাকৃতভাবে এখানে চেকবক্সের আকারটি সামঞ্জস্য করি না):

ছোট হাতের অক্ষরের ক্ষেত্রে একই লাইন থাকে:

বা মূল অক্ষরের ক্ষেত্রে একই মাঝারি রেখা (বিভিন্ন ফন্টের আকারের জন্য পার্থক্যটি দেখতে আরও সহজ):

এবং এছাড়াও আমাদের সিদ্ধান্ত নিতে হবে যে চেকবাক্সের আকার ছোট হাতের অক্ষরের উচ্চতা, বড় বড় অক্ষর বা অন্য কোনও কিছুর (বৃহত্তর, ছোট বা ছোট এবং বড় হাতের মাঝখানে) সমান হওয়া উচিত।

এই আলোচনার জন্য আসুন চেকবক্সটি পাঠ্যের মতো একই বেসলাইনে থাকে এবং একটি মূলধন বর্ণের আকার থাকে (একটি অত্যন্ত তর্কযোগ্য পছন্দ):

এখন আমাদের কাছে কী সরঞ্জাম রয়েছে:

1. চেকবক্সের আকার সামঞ্জস্য করুন
2. ক্রোমিয়ামটিকে এর সিউডো-প্রান্তিক চেকবক্স দিয়ে সনাক্ত করুন এবং নির্দিষ্ট স্টাইল সেট করুন
3. চেকবক্স / লেবেল উল্লম্ব সারিবদ্ধ সামঞ্জস্য করুন

?

1. সংক্রান্ত চেকবক্সটি আকার সমন্বয় : আছে width, height, size, zoom, scale(আমি কিছু মিস করেছেন?)। zoomএবং scaleনিখুঁত আকার সেট করার অনুমতি দেবেন না, সুতরাং তারা কেবল পাঠ্য আকারের সাথে সামঞ্জস্য করতে সহায়তা করতে পারে, ক্রস-ব্রাউজারের আকার সেট না করে (যদি না আমরা ব্রাউজার-নির্দিষ্ট বিধিগুলি লিখতে পারি)। sizeChrome এর সাথে কাজ করে না (এটি কী পুরানো IE এর সাথে কাজ করেছিল? যাইহোক, এটি এতটা আকর্ষণীয় নয়)। widthএবং heightক্রোম এবং অন্যান্য ব্রাউজারগুলিতে কাজ করে, তাই আমরা একটি সাধারণ আকার নির্ধারণ করতে পারি, তবে আবার Chrome এ এটি পুরো চিত্রটির আকার নির্ধারণ করে, চেকবক্সটি নিজেই নয়। দ্রষ্টব্য: এটি সর্বনিম্ন (প্রস্থ, উচ্চতা) যা একটি চেকবক্সের আকার নির্ধারণ করে (যদি প্রস্থ ≠ উচ্চতা হয় তবে চেকবক্সের স্কোয়ারের বাইরের অঞ্চলটি "সিউডো-মার্জিন" এ যুক্ত করা হয়)।

   দুর্ভাগ্যজনক বিষয়টি হ'ল, ক্রোম চেকবাক্সের সিউডো-মার্জিনগুলি কোনও প্রস্থ এবং উচ্চতার জন্য শূন্যতে সেট করা নেই, যতদূর আমি দেখতে পাচ্ছি।

2. আমি ভয় করি যে এই দিনগুলিতে কেবল নির্ভরযোগ্য সিএসএস- এর কোনও পদ্ধতি নেই ।

3. উল্লম্ব প্রান্তিককরণ বিবেচনা করা যাক। vertical-alignযখন ক্রোমের সিউডো-মার্জিনে সেট করা হয় middleবা এর baselineকারণে সামঞ্জস্যপূর্ণ ফলাফল দিতে পারে না , সমস্ত ব্রাউজারগুলির জন্য একই "সমন্বিত সিস্টেম" পাওয়ার একমাত্র আসল বিকল্প হ'ল লেবেল এবং ইনপুটটিকে সারিবদ্ধ করা top:

   

   (ছবিতে: উল্লম্ব-সারিবদ্ধ: শীর্ষে, নীচে এবং নীচে বাক্স-ছায়া ছাড়াই)

সুতরাং আমরা এর থেকে কি ফলাফল পেতে পারি?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

উপরের স্নিপেট ক্রোমের সাথে কাজ করে (ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলি) তবে অন্যান্য ব্রাউজারগুলিতে চেকবক্সের একটি ছোট আকারের প্রয়োজন। ক্রোমিয়ামের চেকবাক্সের ইমেজ কোর্কের চারপাশে কাজ করে এমনভাবে আকার এবং উল্লম্ব সারিবদ্ধ উভয়ই সামঞ্জস্য করা অসম্ভব বলে মনে হচ্ছে। আমার চূড়ান্ত পরামর্শটি হ'ল পরিবর্তে কাস্টম চেকবক্স ব্যবহার করুন - এবং আপনি হতাশাকে এড়াতে পারবেন :)

Comments

এই উত্তর এত গভীর!

— মেরেকি

Answer 12

এখন যেহেতু সমস্ত আধুনিক ব্রাউজারগুলিতে ফ্লেক্সবক্স সমর্থিত, এরকম কিছু আমার কাছে সহজ পদ্ধতির মতো মনে হয়।

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

এখানে সম্পূর্ণ পূর্বনির্ধারিত সংস্করণ ডেমো রয়েছে:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Answer 13

আমি মনে করি এটি সবচেয়ে সহজ উপায়

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

Comments

প্রশ্নটি: এটি কি সমস্ত ব্রাউজারে ভাল কাজ করে? ;-)

— জনসনু

Answer 14

আমি আপেক্ষিক অবস্থান পছন্দ করি না কারণ এটি উপাদানটিকে তার স্তরের সমস্ত কিছুর উপরে উপস্থাপন করে তোলে (আপনার জটিল বিন্যাস থাকলে এটি কোনও কিছুর উপরে উঠতে পারে)।

আমি আবিষ্কার করেছি যে vertical-align: subচেকবাক্সগুলিকে Chrome, ফায়ারফক্স এবং অপেরাতে প্রান্তিকভাবে যথেষ্ট ভাল দেখাচ্ছে। আমার কাছে ম্যাকওএস না থাকায় সাফারি চেক করতে পারবেন না এবং আইই 10 সামান্য বন্ধ রয়েছে তবে আমি এটি আমার পক্ষে যথেষ্ট সমাধান হিসাবে খুঁজে পেয়েছি।

আর একটি সমাধান হ'ল প্রতিটি ব্রাউজারের জন্য নির্দিষ্ট সিএসএস তৈরি করার চেষ্টা করা এবং এটি% / পিক্সেল / ইএম-তে কিছু উল্লম্ব-সারিবদ্ধ করে সূক্ষ্ম-টিউন করা: http://css-tricks.com/snippets/css/browser-specific-hacks/

Comments

ফন্টের আকার খুব বেশি না হওয়া পর্যন্ত কাজ করা মনে হচ্ছে।

— রোবসচ

Answer 15

এটি আমার পক্ষে ভাল কাজ করে:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Comments

px এর পরিবর্তে EMS ব্যবহারের জন্য আপনাকে ধন্যবাদ জানাই।

— 31:45

Answer 16

400+ upvotes সহ নির্বাচিত উত্তরটি ক্রোম 28 ওএসএক্সে আমার পক্ষে কাজ করে নি, সম্ভবত এটি OSX তে পরীক্ষা করা হয়নি বা এই প্রশ্নের উত্তর যখন দেওয়া হয়েছিল তখন ২০০৮ এর আশেপাশে যা কিছু হয়েছিল তাতে কাজ করে।

সময়গুলি পরিবর্তিত হয়েছে, এবং নতুন সিএসএস 3 সমাধান এখন সম্ভাব্য। আমার সমাধানটি একটি কাস্টম চেকবক্স তৈরি করতে সিউডোলেটগুলি ব্যবহার করে । সুতরাং বিধিগুলি (উপকার বা কনস, তবে আপনি এটি দেখুন) নিম্নরূপ:

• কেবলমাত্র আধুনিক ব্রাউজারগুলিতে কাজ করে (FF3.6 +, IE9 +, ক্রোম, সাফারি)
• একটি কাস্টম নকশা করা চেকবক্সের উপর নির্ভর করে, যা প্রতিটি ব্রাউজার / ওএসে ঠিক একই রকমভাবে রেন্ডার হবে। এখানে আমি কিছু সাধারণ রঙ বেছে নিয়েছি, তবে আপনি সর্বদা লিনিয়ার গ্রেডিয়েন্টগুলি যুক্ত করতে পারেন এবং এ জাতীয় আরও বেশি কিছু দেওয়ার জন্য।
• একটি নির্দিষ্ট ফন্ট / হরফ আকারের মতো, যা পরিবর্তিত হলে আপনি চেকবাক্সের অবস্থান এবং আকারটিকে উল্লম্বভাবে সারিবদ্ধভাবে দেখানোর জন্য পরিবর্তন করতে চান। যদি সঠিকভাবে টুইট করা হয়, তবে শেষ ফলাফলটি এখনও সমস্ত ব্রাউজার / অপারেটিং সিস্টেমে ঠিক একইরকম হওয়া উচিত।
• কোনও উল্লম্ব-প্রান্তিককরণের বৈশিষ্ট্য নেই, কোনও ফ্লোট নেই
• আমার উদাহরণে প্রদত্ত মার্কআপটি অবশ্যই ব্যবহার করা উচিত, প্রশ্নের মতো কাঠামোগত করা থাকলে এটি কাজ করবে না, তবে লেআউটটি মূলত একইরকম দেখাবে। আপনি যদি জিনিসগুলি চারপাশে সরিয়ে নিতে চান তবে আপনাকে সংশ্লিষ্ট সিএসএসেও স্থানান্তর করতে হবে

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

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

এবং আপনি যদি আগ্রহী হন তবে এখানে রেডিও বোতামগুলি গ্রহণ করুন: http://jsfiddle.net/DtKrV/2/

আশা করি কেউ এই কাজে লাগবে!

Answer 17

এটি করার জন্য আমার কখনই সমস্যা হয়নি:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

Comments

যেমনটি আমি পূর্ববর্তী পোস্টারগুলিতে বলেছি যারা সুপারিশ করেছিল: এটি পছন্দ করি না কারণ এটির জন্য অপ্রয়োজনীয় মার্কআপ প্রয়োজন। এছাড়াও, আমি সেই মার্কআপটি চেষ্টা করেছিলাম কিন্তু লেবেলটি ইনপুটের নীচে মোড়ানো থেকে আটকাতে অসুবিধা ছিল (এখনও তাদের নিজস্ব লাইনে প্রতিটি লেবেল / ইনপুট গ্রুপ থাকা অবস্থায়)।

— ওয়ান ক্রাইওন

সুতরাং, "অপ্রয়োজনীয়" মার্কআপের পরিবর্তে (সম্ভবত প্রায় প্রত্যেকেই ব্যবহার করেছেন), আপনার চেয়ে বরং সিএসএস লাগবে?

— রবার্ট সি বার্থ

মোড়কের সমস্যা দাঁড়িয়েছে। তবে সাধারণভাবে, হ্যাঁ আমি সিএসএস ক্যাশে হওয়ার কারণে মার্কআপের চেয়ে এক্সটেনারাস সিএসএস চাইতাম, তবে মার্কআপটি প্রতিটি নতুন পৃষ্ঠার জন্য নতুনভাবে চাপতে হতে পারে।

— ওয়ান ক্রাইওন

তুলনা করুন: অতিরিক্ত সিএসএস-ভিএস-এর 1 টি উদাহরণ- অতিরিক্ত মার্কআপের অনেকগুলি উদাহরণ।

— গ্রেগ

Answer 18

আপনি যদি এএসপি.এনইটি ওয়েব ফর্মগুলি ব্যবহার করেন তবে আপনাকে ডিআইভি এবং অন্যান্য উপাদান বা স্থির আকারের বিষয়ে চিন্তা করার দরকার নেই। সিএসএসে চেকবক্সলিস্ট ইনপুট ধরণের উপর <asp:CheckBoxList>সেট করে আমরা পাঠ্যটিকে প্রান্তিককরণ করতে পারি float:left।

নিম্নলিখিত উদাহরণ কোড পরীক্ষা করুন:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.এএসপিএক্স কোড:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

Answer 19

আপনি যদি টুইটার বুটস্ট্র্যাপ ব্যবহার করছেন তবে আপনি কেবল checkboxক্লাসটি ব্যবহার করতে পারেন <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Answer 20

একটি ইনপুট ধরণের চেকবাক্স সহ লেবেলের অভ্যন্তরে আবৃত এবং বাম দিকে এভাবে ভাসা:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

এটি আমার পক্ষে কাজ করেছে:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

নিশ্চিত করুন যে এর উচ্চতা (ব্লকলেভেল) এর লাইন-উচ্চতার সমান।

Answer 21

চেকবাক্সের উচ্চতা এবং প্রস্থকে হার্ডকোড করুন, এর প্যাডিং সরান এবং তার উচ্চতা এবং উল্লম্ব প্রান্তটি লেবেলের লাইন-উচ্চতার সমান করুন। লেবেল পাঠ্যটি যদি ইনলাইন হয় তবে চেকবক্সটি ভাসাবেন। ফায়ারফক্স, ক্রোম এবং আই 7 + সমস্ত নীচের উদাহরণকে একইভাবে উপস্থাপন করে: http://www.kornea.com/css-checkbox-align

Comments

নিস! তবে আপনার এখানে HTML এবং সিএসএস কোড অনুলিপি করা বিবেচনা করা উচিত। একটি উত্তর বহিরাগত লিঙ্ক উপর এতটা নির্ভর করে যে উত্তরগুলি নিরুৎসাহিত করা হয়। ফলাফলটি দেখার জন্য লিঙ্কটি এখনও মূল্যবান, তবে আমি মনে করি যে এখানে কোডটি দেখানো আপনাকে আরও বেশি ভোট পেতে সহায়তা করবে।

— মারিয়ানো দেশানজে

না, তারা না (ফায়ারফক্স এবং ক্রোমে তুলনায়, ক্রোমে চেকবক্সগুলি বেসলাইনের উপরে রয়েছে), আমি ব্যাখ্যা করেছি কেন

— ইয়াকভএল

কেন, আপনি উভয় ব্রাউজারের স্ক্রিনশট এমনকি অসমর্থিত জিনিসটি দাবি করেন। আপনি যখন অন্যকে তা অস্বীকার করার জন্য নয়, বরং দাবির পক্ষে প্রমাণ সরবরাহ করা আপনার কাজ। আমি সেগুলির তুলনা করেছি এবং স্ক্রিনশটগুলি যুক্ত করব, তবে মন্তব্যগুলি ছবি যুক্ত করার পক্ষে সমর্থন করে না; আপনি আমার উত্তর ছবিতে একবার দেখতে পারেন। এটি ব্রাউজার সংস্করণগুলির সাথে পৃথক হতে পারে, সুতরাং ব্রাউজার সংস্করণযুক্ত টীকা সহ স্ক্রিনশট সরবরাহ করা সহায়ক হবে।

— ইয়াকভএল

আমি বিভিন্ন ব্রাউজারে লিঙ্ক করা পৃষ্ঠাটি দেখুন।

— ভ্লাদিমির কর্নিয়া

তো আমি তা করেছিলাম, তাই না? :) পার্থক্য দেখছেন না? imagebin.ca/v/50stCZZGl7Ug imagebin.ca/v/50stNBiv29Ks ফায়ারফক্সে যখন তারা নিখুঁতভাবে সংযুক্ত থাকে, ক্রোমে চেকবক্সটি বেসলাইনটি সম্পর্কে থাকে (আপনি যদি দ্রুত উত্তরগুলিতে আগ্রহী হন তবে আপনি @ এর মাধ্যমে উল্লেখগুলি ব্যবহার করতে পারেন)

— ইয়াকভএল

Answer 22

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 23

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

আমি উইনফর্মস ডেভেলপমেন্টেও একই কারণে শেষ করছি। আমি মনে করি চেকবক্স নিয়ন্ত্রণের সাথে মৌলিক সমস্যাটি হ'ল এটি সত্য দুটি ভিন্ন নিয়ন্ত্রণ: বাক্স এবং লেবেল। একটি চেকবক্স ব্যবহার করে, আপনি কীভাবে এই দুটি উপাদান একে অপরের পাশে প্রদর্শিত হবে তা স্থির করার জন্য এটি নিয়ন্ত্রণের প্রয়োগকারীদের উপর ছেড়ে দিচ্ছেন (এবং তারা সর্বদা এটি ভুল হয়ে যায়, যেখানে ভুল = আপনি যা চান তা নয়)।

আমি সত্যিই আশা করি কারও কাছে আপনার প্রশ্নের উত্তরের উত্তর আছে।

Answer 24

সিএসএস:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

এইচটিএমএল:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

উপরের কোডটি আপনার তালিকা আইটেমগুলিকে থ্রাইকোলগুলিতে রাখবে এবং কেবলমাত্র প্রস্থের অনুসারে পরিবর্তন করবে।

Answer 25

নীচে ব্রাউজারগুলিতে পিক্সেল-নিখুঁত সামঞ্জস্যতা দেয় এমনকি আই 9:

পদ্ধতির বিষয়টি যথেষ্ট বুদ্ধিমান, স্পষ্টতই বোঝার জন্য:

1. একটি ইনপুট এবং একটি লেবেল তৈরি করুন।
2. এগুলি ব্লক হিসাবে প্রদর্শন করুন, যাতে আপনি নিজের পছন্দ মতো ভাসিয়ে নিতে পারেন।
3. তারা কেন্দ্রীভূত হয় এবং উল্লম্বভাবে সারিবদ্ধ হয় তা নিশ্চিত করতে উচ্চতা এবং লাইন-উচ্চতাটিকে একই মানতে সেট করুন।
4. জন্য ই.এম. পরিমাপ, গণনা করতে উপাদানের উচ্চতা, ব্রাউজার ঐ উপাদানের জন্য ফন্ট উচ্চতা জানতে হবে, এবং এটি নিজেই ই.এম. পরিমাপ মধ্যে সেট করা যাবে না।

এটি বিশ্বব্যাপী প্রযোজ্য সাধারণ নিয়মে ফলাফল:

input, label {display:block;float:left;height:1em;line-height:1em;}

ফর্ম আকার, ফিল্ডসেট বা উপাদান প্রতি অভিযোজ্য With

#myform input, #myform label {font-size:20px;}

ম্যাক, উইন্ডোজ, আইফোন এবং অ্যান্ড্রয়েডে সর্বশেষতম ক্রোম, সাফারি এবং ফায়ারফক্সে পরীক্ষিত। এবং আই 9।

এই পদ্ধতিটি সমস্ত ইনপুট ধরণের ক্ষেত্রে প্রযোজ্য যা পাঠ্যের এক লাইনের চেয়ে বেশি নয়। মামলা অনুসারে একটি প্রকারের নিয়ম প্রয়োগ করুন।

Comments

এইচ এম, লেবেল যখন ছোট হাতের অক্ষর দিয়ে শুরু হয় তখন এটি ভাল দেখায়, তবে যদি এটি একটি মূলধন দিয়ে শুরু হয়, তবে এটি আরও খারাপ। আপনি এখানে একটি স্নিপেট যোগ করতে পারেন?

— ইয়াকভএল

Answer 26

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

---

সমাধান # 1 প্রদত্ত ব্রাউজারের নেটিভ "চেকবাক্স" উপর নির্ভর করে, যদিও এটি একটি মোচড়ের সাথে ... এটি একটি ডিভের মধ্যে রয়েছে যা ক্রস ব্রাউজারে অবস্থান করা সহজ, ওভারফ্লো: 1px প্রসারিত চেকবক্সের অতিরিক্ত কাটাতে লুকানো (এটি এফএফের কুৎসিত সীমানা দেখতে পাচ্ছেন না)

সরল এইচটিএমএল: (মন্তব্যে সিএসএস পর্যালোচনা করতে লিংকটি অনুসরণ করুন, কোড ব্লকটি স্ট্যাকওভারফ্লোটি সন্তুষ্ট করার জন্য) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

---

সমাধান # 2 একটি ডিআইভির সিএসএস স্ট্যাট টগল করতে "চেকবাক্স টগল হ্যাক" ব্যবহার করে, যা ব্রাউজার জুড়ে সঠিকভাবে অবস্থিত এবং চেকবক্সটি চেকবিহীন এবং চেক করা রাষ্ট্রগুলির জন্য একটি সাধারণ স্প্রাইট সহ সেটআপ করে। যা যা প্রয়োজন তা হ'ল চেকবক্স টগল হ্যাকের সাথে ব্যাকগ্রাউন্ড-অবস্থানটি সামঞ্জস্য করা। আপনার মতে, আপনার চেকবক্স এবং রেডিওগুলিতে আপনার আরও নিয়ন্ত্রণ রয়েছে বলে এটি আরও মার্জিত সমাধান এবং এটি ব্রাউজার জুড়ে তারা দেখতে একইরকম গ্যারান্টি দিতে পারে।

সরল এইচটিএমএল: (স্ট্যাকওভারফ্লো প্রসারণ করার জন্য মন্তব্যে সিএসএস পর্যালোচনা করতে লিংকটি অনুসরণ করুন) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

---

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

Answer 27

হ্যাঁ ধন্যবাদ! এটিও আমাকে চিরকালের জন্য বাদাম চালিয়ে চলেছে।

আমার বিশেষ ক্ষেত্রে, এটি আমার পক্ষে কাজ করেছে:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

আমি রিসেট.এসএস ব্যবহার করছি যা কিছু পার্থক্য ব্যাখ্যা করতে পারে তবে এটি আমার পক্ষে ভালভাবে কাজ করছে বলে মনে হচ্ছে।

Answer 28

position: relative; আই-তে জেড-ইনডেক্স এবং অ্যানিমেশন সহ jQuery এর স্লাইডআপ / স্লাইডডাউন সহ কিছু সমস্যা রয়েছে।

সিএসএস:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

JQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

স্টাইলিংটি সম্ভবত ব্যবহৃত ফন্ট-আকারের উপর নির্ভর করে টুইটগুলি দরকার <label>

PS:
আমি আই 6- তে সিএসএসের কাজ করতে i7js ব্যবহার করি ।

Answer 29

পোকারিশ্কাvertical-align: sub হিসাবে সহজভাবে ব্যবহার করুনইতিমধ্যে পরামর্শ দিয়েছেন ।

বেহালা

এইচটিএমএল কোড:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

সিএসএস কোড:

.checkboxes input {
    vertical-align: sub;
}

Answer 30

সহজ সমাধান:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

ক্রোম, ফায়ারফক্স, আই 9 +, সাফারি, আইওএস 9+ এ পরীক্ষিত