вопрос
подскажите как в дополнительном поле перенести форму на следующую строку после заголовка, а также как задать ему position:left ?? При этом надо чтобы оставался тег {xfields}
Во-первых, position:left не существует. Атрибут position может принимать свойства absolute, relative или наследовать значение родителя.
Во вторых, для решения задачи можно использовать два пути. Первый - это display:inline-block, второй - float:left.
Пример с float:
Пример со строчным блоком:
HTML код тот же, что и в примере с float.
Во вторых, для решения задачи можно использовать два пути. Первый - это display:inline-block, второй - float:left.
Пример с float:
.container {
width:620px;
padding:20px 20px 0;
margin:30px auto;
background:#eee;
font-size:12px;
font-family:Arial;
border:1px solid #ccc;
-webkit-border-radius:3px;
border-radius:3px;
}
.container:after,
.container:before {
content:"";
display:table;
}
.container:after {
clear:both;
}
.field {
float:left;
width:250px;
margin-bottom:30px;
}
.field p {
margin:0;
font-weight:bold;
}
.field.margin {
margin-right:50px;
}
.field input {
width:250px;
height:20px;
}<div class="container">
<div class="field margin">
<p>Wot</p>
<input type="text" value="" />
</ div>
<div class="field">
<p>Dark</p>
<input type="text" value="" />
</ div>
<div class="field">
<p>Aion</p>
<input type="text" value="" />
</ div>
</ div>
Пример со строчным блоком:
.container {
width:620px;
padding:20px 20px 0;
margin:30px auto;
background:#eee;
font-size:12px;
font-family:Arial;
border:1px solid #ccc;
-webkit-border-radius:3px;
border-radius:3px;
}
.field {
display:inline-block;
vertical-align:top;
*display:inline;
zoom:1;
width:250px;
margin-bottom:30px;
}
.field p {
margin:0;
font-weight:bold;
}
.field.margin {
margin-right:50px;
}
.field input {
width:250px;
height:20px;
}HTML код тот же, что и в примере с float.
