Sejajarkan label dalam formulir di sebelah masukan

Question 1

Saya memiliki skenario bentuk yang sangat mendasar dan dikenal di mana saya perlu menyelaraskan label di sebelah input dengan benar. Namun saya tidak tahu bagaimana melakukannya.

Tujuan saya adalah agar label disejajarkan di sebelah masukan ke sisi kanan. Berikut adalah contoh gambar hasil yang diinginkan.

masukkan deskripsi gambar di sini

Saya telah membuat biola untuk kenyamanan Anda dan untuk mengklarifikasi apa yang saya miliki sekarang - http://jsfiddle.net/WX58z/

Potongan:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Luaskan cuplikan

Question 2

PERINGATAN: JAWABAN KELUAR

Saat ini Anda harus menghindari penggunaan lebar tetap. Anda dapat menggunakan flexbox atau CSS grid untuk menghasilkan solusi yang responsif. Lihat jawaban lainnya.

Satu solusi yang mungkin:

Beri label display: inline-block;
Beri mereka lebar tetap
Ratakan teks ke kanan

Itu adalah:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Luaskan cuplikan

JSFiddle

Question 3

Sementara solusi di sini bisa diterapkan, teknologi yang lebih baru telah membuat apa yang saya anggap sebagai solusi yang lebih baik. CSS Grid Layout memungkinkan kita menyusun solusi yang lebih elegan.

CSS di bawah menyediakan struktur "pengaturan" 2 kolom, di mana kolom pertama diharapkan menjadi label rata kanan, diikuti oleh beberapa konten di kolom kedua. Konten yang lebih rumit dapat disajikan di kolom kedua dengan membungkusnya dalam <div>.

[Sebagai catatan tambahan: Saya menggunakan CSS untuk menambahkan ':' yang mengikuti setiap label, karena ini adalah elemen gaya - preferensi saya.]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

Luaskan cuplikan

Question 4

Menjawab pertanyaan seperti ini sebelumnya, Anda dapat melihat hasilnya di sini:

Membuat formulir agar kolom dan teks bersebelahan - apa cara semantik untuk melakukannya?

Jadi untuk menerapkan aturan yang sama ke biola Anda, Anda dapat menggunakan display:inline-blockuntuk menampilkan label dan kelompok masukan berdampingan, seperti:

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

biola diperbarui

Question 5

Saya menggunakan sesuatu yang mirip dengan ini:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

Gaya:

.form-element label {
    display: inline-block;
    width: 150px;
}

Question 6

Anda juga dapat mencoba menggunakan flex-box

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

Question 7

Saya tahu ini adalah utas lama tetapi solusi yang lebih mudah adalah dengan menyematkan input di dalam label seperti:

<label>Label one: <input id="input1" type="text"></label>

Luaskan cuplikan

Question 8

Berikut adalah lebar label umum untuk semua label formulir. Tidak ada yang memperbaiki lebar.

panggil kalkulator setLabelWidth dengan semua label. Fungsi ini akan memuat semua label pada UI dan mengetahui lebar label maksimum. Terapkan nilai kembali dari fungsi di bawah ini ke semua label.

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

Question 9

Anda bisa melakukan sesuatu seperti ini:

HTML:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

Semoga ini membantu ! :)