Formularz HTML z wejściowymi polami bocznymi

Question

Mam formularz HTML, który jest w zasadzie pionowy, ale naprawdę nie mam pojęcia, jak zrobić dwa pola tekstowe w tej samej linii. Na przykład poniższy formularz powinien zawierać imię i nazwisko w tym samym wierszu, a nie jedno pod drugim.

<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

Domyślny styl wyświetlania dla div jest "blok". Oznacza to, że każdy nowy div będzie pod poprzednim.

Można:

przesłonić styl przepływu za pomocą pacy jak sugeruje @Sarfraz.

lub

Zmień html użyć czegoś innego niż div dla elementów, które mają na tej samej linii. I sugerują, że po prostu opuścić DIV dla „LAST_NAME” pola

<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

Put style="float:left" na każdego z div:

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

Przykład:

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

Aby umieścić element na nowej linii, umieścić ten dział poniżej:

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

Oczywiście, można również tworzyć klasy w pliku CSS:

.left{ 
    float:left; 
} 

.clear{ 
    clear:both; 
} 

I wówczas HTML powinien wyglądać następująco:

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

Aby umieścić element na nowej linii, umieścić ten dział poniżej to:

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

Więcej informacji:

• CSS Float Clear Tutorial

Answer 3

pójdę roztworem Larry K, ale można również ustawić wyświetlanie do inline-block jeśli chcesz korzyści zarówno elementy blokowe i wbudowane.

Można to zrobić w znaczniku div wkładając:

style="display:inline-block;" 

Albo w arkuszu stylów CSS z tą metodą:

div { display:inline-block; } 

nadzieję, że to pomaga, ale jak wcześniej wspomniałem, ja osobiście przejdź do rozwiązania Larry'ego K ;-)

Answer 4

Ze względu na oszczędność przepustowości nie powinniśmy zawierac <div> dla każdego z <label> i <input> par

To rozwiązanie może służyć Ci lepiej i może zwiększyć czytelność

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

css na powyższym formularzu byłoby

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

.form > input 
{ 
    float: right; 
} 

Wierzę, że wynik byłby następujący:

Answer 5

Powinieneś umieścić dane wejściowe dla t ostatnie nazwisko w tym samym div, w którym masz imię.

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

Następnie w CSS nadać #user_first_name i #user_last_name wysokość i unoszą je zarówno w lewo. Na przykład:

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

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