1

我正在编写一个简单的表单来将一些数据发送到数据库。

我在自己的公司中使用它，所以我不需要完美的风格。

我正在使用表格进行布局（在此应用程序中可以）。

<table width="500px" style="border:1px solid black; overflow:hidden">
    <tr>
     <td>Born <input type="text" name="nato_pf" /></td>
    </tr>
</table>

我想将输入文本的宽度设置为 100%（到行尾），但是，如果我这样做，输入文本会换行。

我找到了仅使用 div 的解决方案，目前它们不适合我。

编辑： 有时我在同一行上有两个输入（大小不同），所以我想我不能添加其他td标签。

4

3 回答 3

1 
<table width="500px" style="border: 1px solid black; verflow: hidden">
    <tr>
        <td style="width: 50px;">
            Born
        </td>
        <td>
            <input type="text" name="nato_pf" style="width: 99%;" />
        </td>
    </tr>
</table>

99% 的宽度，因为 100% 的文本框越过表格的边框 :) 并且还给第一个 td 一个宽度；）

jsFiddle http://jsfiddle.net/2yZmB/

于 2013-08-01T10:46:29.833 回答
1

你可以定义另一个 td 元素

<table width="500px" style="border:1px solid black; overflow:hidden">
    <tr>
        <td>Born </td><td><input type="text" name="nato_pf" /></td>
    </tr>
</table>

css

input{
    width:99%;

}
于 2013-08-01T10:43:20.103 回答
1

http://jsfiddle.net/gmmr7/1

table {
    border:1px solid black;
    width: 200px;
}

.left {
    float: left;
}

.left2 {
    overflow: hidden;
    padding: 0 4px;
}

.left2>input {
    width: 100%
}

<table>
    <tr>
        <td>
            <label class="left">Born</label>
            <div class="left2">
                <input type="text" name="nato_pf" />
            </div>
        </td>
    </tr>
</table>
于 2013-08-01T10:52:51.917 回答