it-swarm.asia

محاذاة رأسيًا للنص بجوار زر الاختيار

هذا سؤال أساسي لـ CSS ، لدي زر اختيار مع تسمية نصية صغيرة بعده. أريد أن يظهر النص في وضع عمودي ، لكن النص محاذي دائمًا لزر زر الاختيار في حالتي.

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

هنا Jsfiddle:

http://jsfiddle.net/UnA6j/

أي اقتراحات؟

شكر،

آلان.

39
Alan A

استخدمه داخل label. استعمال vertical-align لتعيينه على قيم مختلفة - bottom ، baseline ، middle إلخ.

http://jsfiddle.net/UnA6j/5/

37
Prasanth

أعتقد أن هذا هو ما قد تسأل عنه

http://jsbin.com/ixowuw/2/

CSS

label{
  font-size:18px;
  vertical-align: middle;
}

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

HTML

<span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>
16
Rahul Thakur

اعتاد على هذا

    input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

تجريبي

8
Rohit Azad

HTML:

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS:

label input[type="radio"] { vertical-align: text-bottom; }
5
Edward Brey

هذا سيعطي الموتى على المحاذاة

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

تحتاج إلى محاذاة النص إلى يسار زر الاختيار باستخدام float: left

input[type="radio"]{
float:left;
}

يمكنك استخدام التصنيف أيضًا لإخراج أكثر استجابة.

3
Sunil Kumar

يمكنك تجربة شيء مثل ؛

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

وإعطاء امتداد أعلى هامش مثل ؛

span{
    margin-top: 4px;
    position:absolute;
}

هنا الكمان http://jsfiddle.net/UnA6j/11/

3
blasteralfred Ψ

حل بسيط وقصير إضافة أدناه نمط:

style="vertical-align: text-bottom;"
2
Vasant
input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}

ببساطة قم بضبط أعلى وأسفل حسب الحاجة للتأقلم التام مع زر الاختيار أو مربع الاختيار

<input type="radio" class="radio">
0
Kickenback61

يمكنك أيضًا تجربة شيء مثل هذا:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
  <label  class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label>
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>
0
Olivia Steger