Pertanyaan Menyesuaikan teks secara vertikal di samping tombol radio


Ini adalah pertanyaan dasar CSS, saya memiliki tombol radio dengan label teks kecil setelahnya. Saya ingin teks ditampilkan secara vertikal tetapi teks selalu selaras dengan tombol tombol radio dalam kasus saya.

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

Berikut ini Jsfiddle:

http://jsfiddle.net/UnA6j/

Ada saran?

Terima kasih,

Alan.


34
2017-07-25 11:53


asal


Jawaban:


Gunakan di dalam label. Menggunakan vertical-align untuk mengaturnya ke berbagai nilai - bottom, baseline, middle dll.

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


31
2017-07-25 11:56



Saya pikir ini adalah apa yang Anda mungkin minta

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>

13
2017-07-25 12:25



Terbiasa dengan ini

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

Demo


7
2017-07-25 11:55



HTML:

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

CSS:

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

4
2017-11-04 05:31



Anda perlu menyelaraskan teks ke kiri tombol radio menggunakan float: left

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

Anda dapat menggunakan label juga untuk hasil yang lebih responsif.


3
2017-07-25 12:31



Ini akan memberi mati pada keselarasan

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

3
2018-02-02 19:34



Anda dapat mencoba sesuatu seperti;

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

dan berikan rentang margin atas seperti;

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

di sini adalah biola http://jsfiddle.net/UnA6j/11/


2
2017-07-25 12:03



solusi sederhana dan pendek tambahkan gaya di bawah ini:

style="vertical-align: text-bottom;"

2
2017-09-16 10:02



Anda juga bisa mencoba sesuatu seperti ini:

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
2018-06-19 14:20



input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}

SIMPLY Atur bagian atas dan bawah sesuai kebutuhan untuk PERFECT ALIGNMENT tombol radio atau kotak centang

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


0
2018-03-14 16:56