এইচটিএমএল রেডিও বোতামটিকে এর লেবেলে উল্লম্বভাবে সারিবদ্ধ করা যায় কীভাবে?

Question

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

আমি কীভাবে তাদের লেবেলগুলির সাথে রেডিও বোতামগুলি উল্লম্বভাবে সারিবদ্ধ করতে পারি?

সম্পাদনা করুন:

এইচটিএমএল কোডটি এখানে:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

এবং সিএসএস কোড:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

Comments

এই মুহুর্তে আপনার কোডটি কেমন দেখাচ্ছে?

— জর্জ

@ নিনজাকোডার কোডটি দিয়ে আপনার প্রশ্ন আপডেট করুন।

— মুঠু কুমারান

Answer 1

এটা চেষ্টা কর:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

Comments

এটি আমার পক্ষে কাজ করেছে তবে height= 100%;আমার পিতা-মাতার উপাদান স্পষ্টভাবে উচ্চতা নির্ধারণ না করায় আমাকে একটি যুক্ত করতে হয়েছিল ।

— দাকাজ

এটি আমাকে ক্রোম, ফায়ারফক্স বা আইইই ব্যবহার করে ম্যাক, উইন্ডোজ এবং লিনাক্সের মধ্যে সর্বাধিক সামঞ্জস্যপূর্ণ দৃষ্টিভঙ্গি দেয় বলে মনে হয়েছিল। এছাড়াও, আমি লক্ষ করেছি যে আমি যদি আমার লেবেলে প্যাডিং দিই এবং রেডিওটি লেবেলের ভিতরে রাখি তবে আমি কত প্যাডিং ব্যবহার করছিলাম তার উপর ভিত্তি করে আমাকে -1px (যেমন -3px) এর চেয়ে কম মানতে মার্জিন-টপ সেট করতে হবে may যে লেবেল। (আমি আমার রেডিও বক্সের লেবেলগুলিকে আরও শীতল দেখানোর জন্য একটি হোভার রঙ এবং বৃত্তাকার সীমানা প্রভাব দিতে চাই))

— ভলমাইক

এটিই কেন একমাত্র সঠিক উত্তর: এইচটিএমএলে কিছু উপাদানগুলির <p> বা <li> উপাদান বা রেডিও বোতামের মতো ডিফল্ট মার্জিন বা প্যাডিং মান থাকে। আপনি যদি বিকাশকারী মোডে যান (F12) এবং আপনার মাউসটিকে ট্যাগের উপরে রাখেন তবে আপনি এটি দেখতে পারেন। প্রকৃতপক্ষে, এটি একটি ভাল আচরণ, কারণ ব্রাউজার নিজেই সিএসএস ব্যবহার করে পূর্বনির্ধারিত উপাদানগুলির অবস্থান নির্ধারণ করে যা ব্যবহারকারী তারপরে পুনরায় সেট করতে পারে। তবে এটি বিভ্রান্তিকর হতে পারে যদি আপনি না জানেন যে কেন প্রথম স্থানে কিছু ভুল করে রাখা হয়েছে। তাই ডিফল্টরূপে অদ্ভুত লাগলে আপনি যে সেটটি সেট করেন নি সেগুলি ওভাররাইট করার জন্য সর্বদা চেষ্টা করুন।

— StanE

আপনি যখন ফন্টের আকার বাড়াবেন বা হ্রাস করবেন তখন এটি কাজ করবে বলে মনে হয় না। একটি কাজের উদাহরণ দিয়ে আমাকে ভুল প্রমাণ করুন, যদিও!

— রক্ষক এক

Answer 2

input {
    display: table-cell;
    vertical-align: middle
}

সমস্ত রেডিওর জন্য ক্লাস রাখুন। এটি HTML পৃষ্ঠায় সমস্ত রেডিও বোতামের জন্য কাজ করবে।

ফিডল

Comments

এটি এখন পর্যন্ত আমি এর জন্য সবচেয়ে ভাল সমাধানটি দেখেছি। রেডিও বোতাম লেবেল সারিবদ্ধকরণ এ পর্যন্ত আমাকে বছরের পর বছর ধরে জর্জরিত করে চলেছে। আমার জন্য প্রত্যেক সময় কাজ করে।

— জি ম্যান

মনে রাখবেন যে লেবেলে একাধিক লাইনের পাঠ্য রয়েছে this

— দান

আপনার ফিডল উদাহরণটি padding: 0; margin: 0ইনপুট উপাদানগুলিতেও প্রযোজ্য এবং মনে হয় সঠিক প্রান্তিককরণটি পাওয়া দরকার।

— এমমানুয়েল বার্গ

Answer 3

আমি জানি আমি মেনুকা ডিভিন্ডা দ্বারা অ্যাওয়ারকে নির্বাচন করেছি তবে এর নীচে দেওয়া মন্তব্যগুলিতে আমি একমত হয়েছি এবং আরও ভাল সমাধান নিয়ে আসার চেষ্টা করেছি। আমি এটি নিয়ে এসেছি এবং আমার মতে এটি আরও মার্জিত সমাধান:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

যারা উত্তর দিয়েছিল তাদের প্রত্যেককে ধন্যবাদ, আপনার উত্তরটি নজরে পড়েনি। যদি আপনি এখনও অন্য কোনও ধারণা পেয়ে থাকেন তবে এই প্রশ্নের নিজের উত্তর যুক্ত করতে নির্দ্বিধায়।

Answer 4

যোগ করার চেষ্টা vertical-align:topCSS মধ্যে

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​

পরীক্ষা: http://jsfiddle.net/muthkum/heAWP/

Comments

আপনি ফন্টের আকার বাড়াতে বা হ্রাস করার সময় এটি ধরে রাখা হয় না।

— রক্ষক এক

@ প্রোটেক্টরোন এটি একটি পুরানো উত্তর এবং ওপি প্রশ্নের ক্ষেত্রে নির্দিষ্ট। আপনি যদি একই সাথে font-sizeচেষ্টা করে থাকেন তবে ব্যবহার করার চেষ্টা করুন display:flex। এখানে একটি ডেমো, jsfiddle.net/et8z47q5

— মুথু কুমারান

Answer 5

উত্তরের সাথে কিছুটা ফ্লেক্স যুক্ত করতে পারে।

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin: 0 0.5rem 0;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

Answer 6

আপনি এটির মতো করতে পারেন:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

Comments

খুব ভালো. আমি লেবেলের পরিবর্তে বোতামটি সারিবদ্ধ করতে চেয়েছিলাম, এবং এটি কৌশলটি করে।

— posfan12

Answer 7

আমি লেবেলের ভিতরে ইনপুটগুলি লাগাতে চাই (যুক্ত বোনাস: এখন আপনার লেবেলের forবৈশিষ্ট্যের প্রয়োজন নেই ), এবং vertical-align: middleইনপুটটি লাগিয়ে দিন।

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

( -2px margin-topএটি স্বাদের বিষয়))

আমার পছন্দ মতো অন্য একটি বিকল্পটি একটি টেবিল ব্যবহার করা। (আপনার পিচ কাঁটাচামচ ধরে রাখুন! এটি সত্যিই দুর্দান্ত!) এর অর্থ এই নয় যে আপনাকে forআপনার সমস্ত লেবেল এবং idগুলিগুলিকে ইনপুটগুলিতে যুক্ত করতে হবে। আমি একাধিক লাইনে দীর্ঘ পাঠ্য সামগ্রী সহ লেবেলগুলির জন্য এই বিকল্পটি সুপারিশ করব।

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

Answer 8

এর মতো কিছু কাজ করা উচিত

সিএসএস:

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

Answer 9

label, input {
    vertical-align: middle;
}

আমি বাক্সগুলির উল্লম্ব মিডপয়েন্টটি কেবল পিতামাতার বাক্সের বেসলাইন এবং পিতামাতার অর্ধেক এক্স-উচ্চতা (en.wikedia.org/wiki/X- উচ্চতা) সাথে সারিবদ্ধ করছি।

Answer 10

এই উত্তরগুলির অনেকগুলি ব্যবহার করতে বলে vertical-align: middle;, যা প্রান্তিককরণটি কাছে পেয়েছে তবে আমার জন্য এটি এখনও কয়েক পিক্সেল বন্ধ রয়েছে। আমি লেবেল এবং রেডিও ইনপুটগুলির মধ্যে সত্য 1 থেকে 1 প্রান্তিককরণ পেতে যে পদ্ধতিটি ব্যবহার করেছি তা হ'ল vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

Answer 11

যদিও আমি সম্মত হই যে টেবিলগুলি ডিজাইনের বিন্যাসগুলির জন্য জনপ্রিয় বিশ্বাসের বিপরীতে ব্যবহার করা উচিত নয় they যেমন টেবিল ট্যাগ হ্রাস করা হয় না। রেডিও বোতামগুলি সারিবদ্ধ করার সর্বোত্তম উপায় হ'ল ইনপুট উপাদানগুলিতে সামঞ্জস্য করা মার্জিন সহ উল্লম্ব সারিবদ্ধ মধ্য সিএসএস ব্যবহার করা।

Answer 12

যোগ করার পদ্ধতি display:inline-blockলেবেল এবং তাদের দান padding-topএই স্থির হবে, আমি মনে করি। এছাড়াও, কেবল line-heightলেবেলগুলিতে সেট করাটিও হবে।

Answer 13

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

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>

Comments

বিন্যাসের উদ্দেশ্যে টেবিলগুলি ব্যবহার করবেন না।

— PeeHaa

-1 টেবিলগুলি বিন্যাসের জন্য ব্যবহার করা উচিত নয় এবং এই কোডটি বৈধতা পাস করবে না ... @ নিনজাকোডার, কেন আপনি এই উত্তরটিকে "উত্তর" হিসাবে বেছে নিয়েছেন?

— tereško

প্রকৃতপক্ষে .. গুরুত্ব সহকারে .. প্রতিটি সময় কেউ ফর্ম মার্কআপের জন্য টেবিলগুলি ব্যবহার করতে শেখায়, একটি সুন্দর বিড়ালছানা বিশ্বের কোথাও মারা যায় ..

— ড্যামিয়েন ওভরিম

@ পেহাহা, তেরেখো, ড্যামিয়েন ওভরিম আমি মনে করি আপনি লোকেরা সম্ভবত সঠিক, আমি আমার নিজের সমাধানটি প্রস্তুত করতে পেরেছি যা আমি এখানে নীচে পোস্ট করেছি। ধন্যবাদ বন্ধুরা! আপনার সহায়তা এবং পরামর্শ অত্যন্ত প্রশংসা করা হয়।

— নিনজাকোডার

আমি অন্যান্য বিকল্পগুলি চেষ্টা করেছি এবং সেগুলি খুব ভাল ছিল না। টেবিল কাজ। .tablecell{dispay:table-cell;} ... <div class="tablecell">এমন