Sejajarkan label dalam formulir di sebelah masukan

140

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

html css alignment Stan
sumber

Jawaban:

198

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

bfavaretto.dll
sumber
4
Bagaimana cara membuat ini berfungsi jika beberapa label adalah kotak centang atau tombol radio? Label untuk elemen ini berakhir dengan lebar tetap yang sama dengan label kotak teks yang tidak diinginkan. Adakah cara untuk melakukan ini tanpa lebar tetap pada label?
Rebecca Meritz
@RebeccaMeritz Maksud Anda ketika markup memiliki kotak centang pertama, dan label sesudahnya? Anda dapat menambahkan kelas ke keduanya, dan menatanya secara terpisah. Mungkin Anda harus mengajukan pertanyaan baru tentang itu.
bfavaretto
2
Bagaimana cara membuatnya responsif? Dan bagaimana cara mengatasi i18n? Maksud saya bahwa label teks memiliki panjang yang berbeda dalam bahasa yang berbeda, oleh karena itu saya khawatir bahwa pengaturan isian lebar tetap tidak berfungsi jika teksnya panjang.
Azimuth
@Azimuth Saat ini, Anda mungkin ingin menggunakan kisi CSS.
bfavaretto
2
ini menandai lebar tetap, itu harus dinamis, berdasarkan lebar label maks.
Samyak Jain
33

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

David Rutherford
sumber
1
Hei, bisakah kamu menambahkan biola?
Stan
Ya, saya telah memperbarui jawaban untuk menggunakan potongan.
David Rutherford
Versi dan platform Chrome mana yang bermasalah?
David Rutherford
1
Solusi Optimal! Berfungsi dengan baik sekarang di Chrome 73.
Philipp Michalski
Hebat! Jika Anda mengganti definisi kolom di atas dengan grid-template-columns: max-content 1fr;, kolom kedua akan menggunakan semua lebar yang tersisa. Bagi saya ini adalah grail suci dari tata letak seperti itu, di mana tidak ada kolom atau lebar konten yang harus ditentukan, dan semuanya cocok dengan sempurna ke dalam ruang yang tersedia, secara otomatis.
jeff-h
12

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

Andres Ilich
sumber
Ini adalah solusi yang sangat bagus, kecuali kenyataan bahwa Anda harus membuat kode keras untuk lebar label. Jika label baru terlalu panjang - tata letaknya rusak. Sepertinya harus ada solusi yang lebih kuat?
mattstuehler
8

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;
}
Mike G
sumber
4

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>
pengguna6797117
sumber
Itu bagus, tapi sama sekali bukan yang dia minta. Lihat gambar di op
phorgan1
3

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

Robert
sumber
Saya sedang mencari solusi untuk ini (termasuk input di dalam label) tetapi dengan teks yang selaras
Natim
0

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
            };

        };
Samyak Jain
sumber
0

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 ! :)

Rakonjac
sumber