3

我有一个表格，其元素结构如下：

<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;
}
4

2 回答 2

3

尝试这个：

form div {
    display: table;
    width: 100%;
}
label,
input { 
    display: table-cell;
}
label{ 
    width: 200px;
}
input {
    width: 100%;
}
于 2009-12-17T07:23:14.503 回答
1

我认为即使使用表格也不可能，因为表格中的所有“列”也将具有相同的宽度。

我想您必须手动定义输入的宽度。不过，请使用 % 而不是 px。

于 2009-12-17T06:50:01.730 回答