Cách đặt các phần tử biểu mẫu web trên một dòng mới?

Question

Làm thế nào để đặt các yếu tố "đầu vào" trên các dòng mới? Trong ví dụ trên tất cả các yếu tố được đặt tuần tự, tức là lable-> Input-> lable-> đầu vào vv

/* ----------- My Form ----------- */ 
.myform{ 
    margin:0 auto; 
    padding:14px; 
} 
#stylized{ 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    background:#ebf4fb; 
} 
#stylized h1 { 
    font-size:14px; 
    font-weight:bold; 
    margin-bottom:8px; 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    padding-bottom:10px; 
} 
#stylized label{ 
    display:block; 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
    float:left; 
} 
#stylized input{ 
    float:left; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
} 
/* --------- End of Form --------- */ 

    <div id="stylized" class="myform"> 
     <form id="form" name="form" method="post" action="index.html"> 
     <h1>Data</h1> 
     <label>Name: </label> 
     <input type="text" name="name" id="name"/> 
     <label>Email: </label> 
     <input type="text" name="email" id="email"/> 
     <label>Password: </label> 
     <input type="text" name="password" id="password"/> 
     </form> 
    </div> 

Answer 1

#stylized input{ 
    display: block; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
} 

chí này đặt mọi đầu vào trên một dòng mới. - Đã xóa "float: left", đã thêm "display: block".

Answer 2

Các bạn đã thử bất cứ điều gì đơn giản như

<label>Name: </label><br> 
     <input type="text" name="name" id="name"/> 
     <label>Email: </label><br> 
     <input type="text" name="email" id="email"/> 

Answer 3

Đây là JsFiddle cho rằng ...

Edit:

#stylized label{ 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
} 
#stylized input{ 
    display:block; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
}​ 

Answer 4

Bạn ngăn chặn dòng mới khi lựa chọn một bố trí nổi với đủ chỗ cho tất cả các yếu tố này.

Hãy thử điều này:

mẫu http://jsfiddle.net/8yZff/

#stylized label{ 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
} 
#stylized input{ 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
    display: block; 
} 

Answer 5

Tôi đoán là anwswer user1359163 sẽ giúp đỡ, mặc dù bạn có thể quan tâm để biết lý do tại sao: sử dụng float loại bỏ một cách hiệu quả các phần tử ra khỏi của tài liệu bình thường dòng chảy, hơi giống như thay đổi z-index, cho phép phần tử chảy qua biên giới div, nhãn, nhịp và ... 'bỏ qua' clear kiểu.

Phần tử hoạt động như thể nó nổi trên các phần tử khác, do đó, theo khía cạnh đó, phần tử vẫn ở bên trái và bên phải của tất cả các phần tử khác không nổi. Tôi không có chuyên gia CSS, nhưng cách nhìn này đã giúp tôi giải quyết nhiều vấn đề với bố cục bị xáo trộn mà tôi gặp phải khi sử dụng các kiểu float, clear và z-index.

Answer 6

Đối với dữ liệu dạng bảng, chẳng hạn như một loạt các cặp nhãn/trường, hãy sử dụng table. Bạn sẽ tìm thấy kiểu dáng dễ dàng hơn nhiều, và hình thức nonstyled tốt hơn nhiều.