Как я могу получить два поля формы бок о бок, с каждой меткой полей над полем, в CSS?
Я зациклился на вычислении некоторого css, мне нужен раздел моей формы, чтобы выглядеть следующим образом:
![CSS float left]()
Я пробовал каждую вариацию, о которой я могу думать,
Я дал ярлыкам фиксированную ширину и поместил их влево, а затем дал входы той же ширины и оставил их влево.
У меня все из идей, как я могу достичь этого, пожалуйста?
Ответы
Ответ 1
<form>
<label for="company">
<span>Company Name</span>
<input type="text" id="company" />
</label>
<label for="contact">
<span>Contact Name</span>
<input type="text" id="contact" />
</label>
</form>
label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }
Иллюстрируется в http://jsfiddle.net/H3y8j/
Ответ 2
Вам нужен элемент HTML для каждого столбца в вашем макете.
Id предлагает:
HTML
<div class="two-col">
<div class="col1">
<label for="field1">Field One:</label>
<input id="field1" name="field1" type="text">
</div>
<div class="col2">
<label for="field2">Field Two:</label>
<input id="field2" name="field2" type="text">
</div>
</div>
CSS
.two-col {
overflow: hidden;/* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
width 49%;
}
.two-col .col1 {
float: left;
}
.two-col .col2 {
float: right;
}
.two-col label {
display: block;
}
Ответ 3
Это хорошо работает
http://jsfiddle.net/aY9HC/
Ответ 4
Как насчет чего-то подобного?
<div id="leftContainer">
<span>Company Name</span>
<br><input type="text" value="John Lewis Partnership">
</div>
<div id="rightContainer">
<span>Contact Name</span>
<br><input type="text" value="Timothy Patten">
</div>
Затем вы можете выровнять 2 divs, плавая влево и вправо: -
#leftContainer {
float:left;
}
#rightContainer {
float:right;
}
Ответ 5
<div>
<div style="float:left; width:101px; height:auto;">
<div style="width:200px; float:left;">
LabelText
</div>
<div style="width:200px; float:left;">
<input type="text" name="textfield" id="textfield" />
</div>
</div>
<div style="float:left; width:101px; height:auto;">
<div style="width:200px; float:left;">
LabelText
</div>
<div style="width:200px; float:left;">
<input type="text" name="textfield" id="textfield" />
</div>
</div>
</div>
Ответ 6
Попробуйте
<style type="text/css">
form {width:400px;}
#text1 {float:right;}
#text2 {float:left;}
</style>
затем
<form id="form1" name="form1" method="post" action="">
<label id="text1">Company Name<br />
<input type="text" name="textfield2" id="textfield2" />
</label>
<label id="text2">Contact Name<br />
<input type="text" name="textfield" id="textfield" />
</label>
</form>
Страница тестирования: http://jsbin.com/ahelo4
Работает для меня в последних версиях Firefox, Safari, Chrome, Opera. Не 100% уверены в IE, но как im на Mac, но я не могу понять, почему это не будет:)
Ответ 7
Это отлично сработало для меня без css. Я думаю, что css поставил бы некоторые глазури на торт, хотя.
<form>
<label for="First Name" >First Name:</label>
<input type="text" name="username" size="15" maxlength="30" />
<label for="Last Name" >Last Name:</label>
<input type="text" name="username" size="15" maxlength="30" />
</form>