Biểu mẫu HTML với các trường nhập bên cạnh

Question

Tôi có dạng html về cơ bản là dọc nhưng tôi thực sự không có ý tưởng cách tạo hai trường văn bản trên cùng một dòng. Ví dụ như dưới đây hình thức tôi muốn tên đầu tiên và cuối cùng trên cùng một dòng chứ không phải là một bên dưới khác.

<form action="/users" method="post"><div style="margin:0;padding:0"> 


      <div> 
       <label for="username">First Name</label> 
       <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 

      </div> 

      <div> 
       <label for="name">Last Name</label> 
       <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
      </div> 
      <div> 
       <label for="email">Email</label> 
       <input id="user_email" name="user[email]" size="30" type="text" /> 
      </div> 
      <div> 
       <label for="pass1">Password</label> 
       <input id="user_password" name="user[password]" size="30" type="password" /> 
      </div> 
      <div> 
       <label for="pass2">Confirm Password</label> 

       <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> 

      </div> 

Answer 1

Màn hình hiển thị phong cách mặc định cho một div là "khối". Điều này có nghĩa là mỗi div mới sẽ nằm trong danh sách trước.

Bạn có thể:

Ghi đè kiểu dòng bằng cách dùng phao như @Sarfraz gợi ý.

hoặc

Thay đổi html của bạn để sử dụng thứ gì đó khác với div cho các thành phần bạn muốn trên cùng một dòng. Tôi đề nghị rằng bạn chỉ cần bỏ qua divs cho "last_name" lĩnh vực

<form action="/users" method="post"><div style="margin:0;padding:0"> 
    <div> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 

    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
    </div> 
    ... rest is same 

Answer 2

Đặt style="float:left" trên mỗi divs của bạn:

<div style="float:left;">........... 

Ví dụ:

<div style="float:left;"> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
</div> 

<div style="float:left;"> 
    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

Để đưa một yếu tố trên dòng mới, đặt này div dưới nó:

<div style="clear:both;">&nbsp;</div> 

Tất nhiên, bạn cũng có thể tạo các lớp trong file CSS:

.left{ 
    float:left; 
} 

.clear{ 
    clear:both; 
} 

Và rồi html của bạn sẽ trông như thế này:

<div class="left"> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
</div> 

<div class="left"> 
    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

Để đưa một yếu tố trên dòng mới, đặt này div bên dưới nó:

<div class="clear">&nbsp;</div> 

More Info:

• CSS Float Clear Tutorial

Answer 3

tôi sẽ đi với giải pháp Larry K, nhưng bạn cũng có thể thiết lập màn hình để inline-block nếu bạn muốn những lợi ích của cả hai khối và các yếu tố nội tuyến.

Bạn có thể làm điều này trong thẻ div bằng cách chèn:

style="display:inline-block;" 

Hoặc trong một stylesheet CSS với phương pháp này:

div { display:inline-block; } 

Hy vọng nó sẽ giúp, nhưng như trước đó đã đề cập, tôi sẽ đích thân hãy tìm giải pháp của Larry K ;-)

Answer 4

Để tiết kiệm băng thông, chúng tôi không nên bao gồm <div> cho mỗi <label> và <input> cặp

Giải pháp này có thể phục vụ bạn tốt hơn và có thể làm tăng khả năng đọc

<div class="form"> 
      <label for="product_name">Name</label> 
      <input id="product_name" name="product[name]" size="30" type="text" value="4"> 
      <label for="product_stock">Stock</label> 
      <input id="product_stock" name="product[stock]" size="30" type="text" value="-1"> 
      <label for="price_amount">Amount</label> 
      <input id="price_amount" name="price[amount]" size="30" type="text" value="6.0"> 
</div> 

Các css cho các hình thức trên sẽ là

.form > label 
{ 
    float: left; 
    clear: right; 
} 

.form > input 
{ 
    float: right; 
} 

Tôi tin rằng đầu ra sẽ là như sau:

Answer 5

Bạn nên đặt đầu vào cho t ông cuối cùng tên vào cùng một div nơi bạn có tên đầu tiên.

<div> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

Sau đó, trong CSS, hãy cung cấp chiều cao #user_first_name và #user_last_name và thả cả hai sang bên trái. Ví dụ:

#user_first_name{ 
    max-width:100px; /*max-width for responsiveness*/ 
    float:left; 
} 

#user_lastname_name{ 
    max-width:100px; 
    float:left; 
}