我有一个表单元素的结构如下:
<div>
<label>Name</label>
<input type="text" name="name" />
</div>
<div>
<label>Address</label>
<input type="text" name="address" />
</div>
我希望它看起来的方式是,标签位于输入框旁边,输入框展开以适合整个容器。如果我在输入框上设置手动宽度(以像素为单位),则不是每个框的长度都相同。
如果我尝试将宽度设置为100%,则输入框会换行换行以扩展整个宽度。
如何将标签(宽度可变)放在输入框左侧的位置,并将这些输入框展开以适合其包含的div?
这是我目前的CSS:
#content form input
{
border: none;
height: 23px;
position: relative;
top: -1px;
left: -5px;
padding-top: 5px;
text-indent: 10px;
display: inline-block;
}
#content form label
{
background: #c6c9c0 url('../images/form-label-bg.jpg') no-repeat center right;
height: 28px;
line-height: 30px;
display: inline-block;
text-indent: 15px;
padding-right: 25px;
color: #6a6a6a;
text-transform: uppercase;
font-weight: bold;
font-size: 8pt;
}
答案 0 :(得分:3)
试试这个:
form div {
display: table;
width: 100%;
}
label,
input {
display: table-cell;
}
label{
width: 200px;
}
input {
width: 100%;
}
答案 1 :(得分:1)
我认为即使使用表也不可能,因为表中的所有“列”也具有相同的宽度。
我必须手动定义输入的宽度。但是,请使用%而不是px。