Форма CSS с соседними полями ... как выровнять метки и поля по вертикали? - PullRequest
Новая
       0

Форма CSS с соседними полями ... как выровнять метки и поля по вертикали?

2 голосов
/ 16 декабря 2010

полностью разочарован здесь чем-то, что, вероятно, так просто.У меня есть форма и я хочу, чтобы поля Zip и Zip + 4 находились на одной строке.По какой-то причине ничто не соответствует тому, как я это сделал.Я провел последние 6 часов в поисках в Интернете и пробовал разные вещи (последние были с этого сайта), и ничего не работает.Может кто-то помочь мне, пожалуйста?Спасибо!Вот мой код: 

<form>
<div style="float:left;"> 
  <label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px"  id="StrAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px"  id="StrSecondaryAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput"  style="width:200px"  id="StrCity"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;">&nbsp;</div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px"  id="IntZip5"  />


<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">

</div>
<div style="clear:both;">&nbsp;</div>
<input type="button" class="button" value="Submit Form" />


</form>

Ответы [ 4 ]

5 голосов
/ 17 декабря 2010

это сделает работу за вас? Пожалуйста, проверьте это на нескольких браузерах потому что это только проверено на FF 3.6, IE 7 +

2 голосов
/ 16 декабря 2010

Несмотря на то, что полиция структуры наверняка привлечет меня к этому, я считаю, что использование таблицы - это самый надежный способ выстроить элементы во всех браузерах.Установите vertical-align:top и делайте то, что вам нужно.

0 голосов
/ 16 декабря 2010

Код, который вы разместили, показывает мне zip и zip + 4 в одной строке для Firefox, Chrome и IE. Можете ли вы опубликовать скриншот того, как вы видите его по-другому и как вы хотите, чтобы он выглядел?

alt text

0 голосов
/ 16 декабря 2010

Вы можете сделать что-то вроде этого: 

<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
    width: 300px !important;/* added important to override your inline styles*/
    display: block !important;
    text-align: right !important;
    float: left;
    }
</style>
</head>
<body>
<form>
<div style="float:left;">
  <label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px"  id="StrAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px"  id="StrSecondaryAddress"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput"  style="width:200px"  id="StrCity"  />
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;">&nbsp;</div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px"  id="IntZip5"  />


<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;">&nbsp;</div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">

</div>
<div style="clear:both;">&nbsp;</div>
<input type="button" class="button" value="Submit Form" />


</form>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...