Căn chỉnh nhãn ở dạng bên cạnh đầu vào

136

Tôi có kịch bản biểu mẫu rất cơ bản và đã biết, nơi tôi cần căn chỉnh nhãn bên cạnh đầu vào một cách chính xác. Tuy nhiên tôi không biết làm thế nào để làm điều đó.

Mục tiêu của tôi sẽ là các nhãn được căn chỉnh bên cạnh đầu vào bên phải. Dưới đây là ví dụ hình ảnh của kết quả mong muốn.

nhập mô tả hình ảnh ở đây

Tôi đã thực hiện một câu đố để thuận tiện cho bạn và để làm rõ những gì tôi có bây giờ - http://jsfiddle.net/WX58z/

Đoạn trích:

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

Mở rộng đoạn trích

html css alignment

— Stan
nguồn

189

Một giải pháp khả thi:

Đưa ra các nhãn display: inline-block;
Cung cấp cho họ một chiều rộng cố định
Căn chỉnh văn bản bên phải

Đó là:

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>

Mở rộng đoạn trích

Câu đố

— bfavaretto
nguồn

4

Làm cách nào để thực hiện công việc này nếu một số nhãn là hộp kiểm hoặc nút radio? Các nhãn cho các thành phần này kết thúc với cùng chiều rộng cố định như nhãn hộp văn bản không mong muốn. Có cách nào để làm điều này mà không có chiều rộng cố định trên nhãn không?

— Rebecca Meritz

@RebeccaMeritz Ý bạn là khi đánh dấu có hộp kiểm trước và nhãn sau? Bạn có thể thêm một lớp cho cả hai và tạo kiểu riêng cho chúng. Có lẽ bạn nên hỏi một câu hỏi mới về nó.

— bfavaretto

2

Làm thế nào để thực hiện điều này đáp ứng? Và làm thế nào để đối phó với i18n? Ý tôi là các nhãn văn bản có độ dài khác nhau trong các ngôn ngữ khác nhau, do đó tôi sợ rằng cài đặt độ rộng cố định sẽ không hoạt động nếu văn bản dài.

— Azimuth

@Azimuth Ngày nay, bạn có thể muốn sử dụng lưới CSS thay thế.

— bfavaretto

1

đây là đánh dấu chiều rộng cố định, nó phải là động, dựa trên chiều rộng nhãn tối đa.

— Samyak Jain

27

Trong khi các giải pháp ở đây là khả thi, công nghệ gần đây đã làm cho những gì tôi nghĩ là một giải pháp tốt hơn. Bố cục lưới CSS cho phép chúng tôi cấu trúc một giải pháp thanh lịch hơn.

CSS bên dưới cung cấp cấu trúc "cài đặt" 2 cột, trong đó cột đầu tiên được dự kiến là nhãn được căn phải, theo sau là một số nội dung trong cột thứ hai. Nội dung phức tạp hơn có thể được trình bày trong cột thứ hai bằng cách gói nó trong <div>.

[Như một lưu ý phụ: Tôi sử dụng CSS để thêm ':' bám theo từng nhãn, vì đây là yếu tố phong cách - sở thích của tôi.]

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

Mở rộng đoạn trích

— David Rutherford
nguồn

1

Hey, bạn có thể thêm một fiddle xin vui lòng?

— Stan

Có, tôi đã cập nhật câu trả lời để sử dụng đoạn trích.

— David Rutherford

Phiên bản và nền tảng Chrome nào bạn gặp sự cố?

— David Rutherford

1

Giải pháp tối ưu! Hiện hoạt động tốt trong Chrome 73.

— Philipp Michalski

Tuyệt vời! Nếu bạn thay thế định nghĩa cột ở trên bằng grid-template-columns: max-content 1fr;, cột thứ hai sẽ sử dụng tất cả chiều rộng còn lại. Đối với tôi đây là chén thánh của các bố cục như vậy, trong đó không có độ rộng cột hoặc nội dung phải được chỉ định và mọi thứ đều tự động hoàn toàn phù hợp với không gian có sẵn.

— jeff-h

12

Đã trả lời một câu hỏi như thế này trước đây, bạn có thể xem kết quả tại đây:

Tạo biểu mẫu để có các trường và văn bản cạnh nhau - cách thức ngữ nghĩa để làm điều đó là gì?

Vì vậy, để áp dụng các quy tắc tương tự cho fiddle của bạn, bạn có thể sử dụng display:inline-blockđể hiển thị nhãn và các nhóm đầu vào cạnh nhau, như vậy:

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

cập nhật fiddle

— Andres Ilich
nguồn

Đây là một giải pháp rất hay, ngoại trừ thực tế là bạn phải mã hóa độ rộng của nhãn. Nếu một nhãn mới quá dài - bố cục bị phá vỡ. Có vẻ như nên có một giải pháp mạnh mẽ hơn?

— mattstuehler

8

Tôi sử dụng một cái gì đó tương tự như thế này:

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

Phong cách:

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

— Mike G
nguồn

4

Bạn cũng có thể thử sử dụng 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>

— người dùng6797117
nguồn

Đó là đẹp, nhưng không phải tất cả những gì anh yêu cầu. Xem hình trong op

— phorgan1

3

Tôi biết đây là một chủ đề cũ nhưng một giải pháp dễ dàng hơn là nhúng một đầu vào trong nhãn như vậy:

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

Mở rộng đoạn trích

— Robert
nguồn

Tôi đang tìm kiếm một giải pháp cho việc này (bao gồm đầu vào bên trong nhãn) nhưng với văn bản được căn chỉnh

— Natim

0

Đây là chiều rộng nhãn chung cho tất cả các nhãn mẫu. Không có gì sửa chiều rộng.

gọi setLabelWidth tính với tất cả các nhãn. Chức năng này sẽ tải tất cả các nhãn trên UI và tìm ra chiều rộng nhãn tối đa. Áp dụng giá trị trả về của hàm dưới đây cho tất cả các nhã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
            };

        };

— Saman Jain
nguồn

0

Bạn có thể làm một cái gì đó như thế này:

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

Hi vọng điêu nay co ich ! :)

— Rakonjac
nguồn