Girdinin yanındaki formdaki etiketleri hizalama

136

Girişlerin yanındaki etiketleri doğru bir şekilde hizalamam gereken çok temel ve bilinen form senaryosuna sahibim. Ancak nasıl yapılacağını bilmiyorum.

Amacım, etiketlerin sağ taraftaki girdilerin yanında hizalanmasıdır. İşte istenen sonucun resim örneği.

resim açıklamasını buraya girin

Size kolaylık sağlamak ve şimdi ne yaptığımı açıklamak için bir keman yaptım - http://jsfiddle.net/WX58z/

Pasaj:

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

Snippet'i genişlet

html css alignment

— Stan
kaynak

190

Olası bir çözüm:

Etiketleri verin display: inline-block;
Onlara sabit bir genişlik verin
Metni sağa hizala

Yani:

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>

Snippet'i genişlet

JSFiddle

— bfavaretto
kaynak

4

Bazı etiketler onay kutuları veya radyo düğmeleriyse bu işlemi nasıl yapabilirim? Bu öğelerin etiketleri, istenmeyen metin kutusu etiketleriyle aynı sabit genişliğe sahip olur. Bunu etikette sabit bir genişlik olmadan yapmanın bir yolu var mı?

— Rebecca Meritz

@RebeccaMeritz İşaretlemenin önce onay kutusunu ve daha sonra etiketin ne zaman olduğunu mu kastediyorsunuz? Her ikisine de bir sınıf ekleyebilir ve ayrı ayrı biçimlendirebilirsiniz. Belki de bu konuda yeni bir soru sormalısınız .

— bfavaretto

2

Bunu nasıl duyarlı hale getirebilirim? Ve i18n ile nasıl başa çıkılır? Yani, metin etiketlerinin farklı dillerde farklı uzunlukları var, bu yüzden metin uzunsa sabit genişlik dolgusunun ayarlanmasının işe yaramayacağından korkuyorum.

— Azimuth

@Azimuth Günümüzde bunun yerine CSS ızgarasını kullanmak isteyebilirsiniz.

— bfavaretto

1

bu sabit genişliği işaretler, maksimum etiket genişliğine göre dinamik olmalıdır.

— Samyak Jain

27

Buradaki çözümler uygulanabilir olsa da, daha iyi bir çözüm olduğunu düşündüğüm şey için daha yeni bir teknoloji yaptı. CSS Izgara Düzeni , daha zarif bir çözüm yapılandırmamızı sağlar.

Aşağıdaki CSS, ilk sütunun sağa hizalı bir etiket olması ve ardından ikinci sütundaki bazı içeriklerin beklendiği 2 sütunlu bir "ayarlar" yapısı sağlar. Daha karmaşık içerik, bir <div> içine sarılarak ikinci sütunda sunulabilir.

[Yan not olarak: Bu stilistik bir öğe olduğu için her etiketi izleyen ':' eklemek için CSS kullanıyorum - tercihim.]

/* 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>

Snippet'i genişlet

— David Rutherford
kaynak

1

Hey, bir keman ekleyebilir misin lütfen?

— Stan

Evet, parçacıkları kullanmak için cevabı güncelledim.

— David Rutherford

Hangi Chrome sürümü ve platformuyla ilgili sorun yaşıyorsunuz?

— David Rutherford

1

En uygun çözüm! Chrome 73'te şimdi iyi çalışıyor.

— Philipp Michalski

Müthiş! Yukarıdaki sütun tanımını ile değiştirirseniz, grid-template-columns: max-content 1fr;ikinci sütun kalan tüm genişliği kullanır. Bu benim için hiçbir sütun veya içerik genişliğinin belirtilmemesi gereken ve her şeyin otomatik olarak kullanılabilir alana mükemmel şekilde sığdığı bu tür yerleşimlerin kutsal kasesi.

— jeff-h

12

Daha önce böyle bir soruyu cevapladıysanız, aşağıdaki sonuçlara bir göz atabilirsiniz:

Alanların ve metnin yan yana olması için form oluşturma - bunu yapmak için semantik yol nedir?

Dolayısıyla, aynı kuralları kemanınıza uygulamak display:inline-blockiçin etiketinizi ve giriş gruplarınızı yan yana görüntülemek için kullanabilirsiniz , örneğin:

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

güncellenmiş keman

— Andres Ilich
kaynak

Etiketlerin genişliğini zor kodlamanız gerekmesi dışında bu çok güzel bir çözümdür. Yeni bir etiket çok uzunsa - düzen bozulur. Daha sağlam bir çözüm olmalı mı?

— mattstuehler

8

Buna benzer bir şey kullanıyorum:

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

Stil:

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

— Mike G
kaynak

4

Flex-box'ı kullanmayı da deneyebilirsiniz

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

— user6797117
kaynak

Bu güzel, ama istediği hiç de değil. Op

— phorgan1'deki

3

Bu eski bir iş parçacığı olduğunu biliyorum ama daha kolay bir çözüm böyle bir etiket içinde bir giriş gömmek için olurdu:

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

Snippet'i genişlet

— Robert
kaynak

Bunun için bir çözüm arıyordum (etiketin içindeki girişi dahil et) ama hizalanmış metinle

— Natim

0

İşte tüm form etiketleri için genel etiket genişliği. Sabit genişlik yok.

Tüm etiketleri içeren setLabelWidth hesap makinesini çağırın. Bu işlev tüm etiketleri kullanıcı arayüzüne yükler ve maksimum etiket genişliğini bulur. Aşağıdaki işlevin dönüş değerini tüm etiketlere uygulayın.

     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
kaynak

0

Bunun gibi bir şey yapabilirsiniz:

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

Bu yardımcı olur umarım ! :)

— Rakonjac
kaynak