Căn chỉnh các phần tử biểu mẫu trong css

Tôi mới sử dụng css và có biểu mẫu đăng nhập đơn giản mà tôi đang cố gắng căn chỉnh chính xác. Về cơ bản, hai cột có nhãn và nút Đăng nhập trong một cột và các hộp văn bản trong một cột khác. Làm thế nào để làm điều này trong css?Căn chỉnh các phần tử biểu mẫu trong css

Mã html là

<body> 
    <form action="" method="post"> 
    <label> Username </label> 
    <input type="text"/> 

    <label> Password </label> 
    <input type="password"/> 

    <input type="submit" value="submit"/> 
    </form> 
</body>

Nguồn

2012-11-02 DavidL

Sau mật khẩu và tên người dùng nhập chỉ cần thêm
. – Vucko

Đây là một cách tiếp cận hoạt động:

form { 
    width: 80%; 
    margin: 0 auto; 
} 

label, input { 
    /* in order to define widths */ 
    display: inline-block; 
} 

label { 
    width: 30%; 
    /* positions the label text beside the input */ 
    text-align: right; 
} 

label + input { 
    width: 30%; 
    /* large margin-right to force the next element to the new-line 
     and margin-left to create a gutter between the label and input */ 
    margin: 0 30% 0 4%; 
} 

/* only the submit button is matched by this selector, 
    but to be sure you could use an id or class for that button */ 
input + input { 
    float: right; 
}

JS Fiddle demo.

Điều chỉnh kích thước và lề cho phù hợp với trường hợp sử dụng và tính thẩm mỹ của bạn.

Nguồn

2012-11-02 22:45:39

@Jacob: cảm ơn! Đó có lẽ là một tuyên bố khá khó hiểu trước khi chỉnh sửa! XD –

một lần nữa người đàn ông - tên tốt đẹp @DaveThomas –

Đối với những gì bạn đang hỏi, tôi chỉ cần đặt chúng vào một cái bàn.

<form action="" method="post"> 
    <table> 
     <tr> 
      <td><label> Username </label></td> 
      <td><input type="text"/></td> 
     </tr> 
     <tr> 
      <td><label> Password </label></td> 
      <td> <input type="password"/></td> 
     </tr> 
     <tr> 
      <td colspan="2"><input type="submit" value="submit"/></td> 
     </tr> 
    </table> 
    </form>

Đây là những gì nó sẽ giống như http://jsfiddle.net/wCSAn/

Nguồn

2012-11-02 22:53:24 TheLawrence

+10

Đây không phải là dữ liệu dạng bảng và do đó không nên nằm trong một bảng – Neil

Câu hỏi đã hỏi cách thực hiện trong CSS. Mặc dù các bảng là hấp dẫn bởi vì họ nhận được công việc làm, nó không phải là thực hành tốt. –

Có hàng và cột - đó là một bảng. – dcromley

Tôi đã trả lời câu hỏi này trong bài viết trên blog của tôi: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/

Nó đề cập thay vì chỉ violong này: https://jsfiddle.net/wscherphof/9sfcw4ht/9/

Spoiler: float: right; là quyền hướng, nhưng cần chú ý hơn một chút để có được kết quả gọn gàng.

Nguồn

2015-06-18 18:50:11 user2389922

+1 để cung cấp 4 cách tiếp cận khác nhau, được dọn dẹp và giải thích một cách độc đáo. Tuy nhiên, nếu những liên kết đó chết thì câu trả lời này sẽ vô dụng. Vui lòng dành thời gian để mô tả ngắn gọn các giải pháp của bạn trong câu trả lời trực tiếp. –

Căn chỉnh các phần tử biểu mẫu trong css

Trả lời

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