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

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

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

enter image description here

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

Snippet:

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

Nguồn

2012-03-13 sed

138

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

Tặng nhãn display: inline-block;
Cung cấp cho họ một chiều rộng cố định
Align 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>

JSFiddle

Nguồn

2012-03-13 14:59:39 bfavaretto

thế nào Tôi thực hiện công việc này nếu một số nhãn là các hộp kiểm hoặc nút radio? Các nhãn cho các phần tử này kết thúc với chiều rộng cố định giống như các 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? –

@RebeccaMeritz Bạn có nghĩa là khi đánh dấu có hộp kiểm đầu tiên 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] (http://stackoverflow.com/questions/ask) về nó. – bfavaretto

tôi sử dụng một cái gì đó tương tự như sau:

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

Kiểu:

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

Nguồn

2012-03-13 15:01:03

trả lời một câu hỏi như thế này trước đây, bạn có thể có một cái nhìn vào kết quả ở đây:

Creating form to have fields and text next to each other - what is the semantic way to do it?

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

updated fiddle

Nguồn

2012-03-13 15:11:34

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>

Nguồn

2016-09-05 16:17:05 user6797117

Đó là khá, nhưng không phải ở tất cả những gì ông yêu cầu. Xem hình ảnh trong op – Patrick

Trong khi các giải pháp ở đây là hoàn toàn khả thi, công nghệ gần đây đã khiến cho những gì tôi nghĩ là một tốt hơn dung dịch. 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 2 cột "cài đặt", trong đó cột đầu tiên được mong đợi là nhãn được căn chỉnh bê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 một <div>.

[Là một phụ lưu ý: Tôi sử dụng CSS để thêm ':' mà thua mỗi nhãn, vì đây là một 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>

Nguồn

2018-01-22 16:43:07

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

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

Tính năng này hoạt động trong FF nhưng không có trong Chrome –

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

Trả lời

Các vấn đề liên quan