2

我有一个在文本字段左侧内嵌表单标签的设计。标签都是不同的宽度。我需要使文本字段的右边缘右对齐。

目前，这些字段看起来像这样。看看右边缘如何不对齐？

姓名：_ __ _ __ _ __ _ ___

地址：_ __ _ __ _ __ _ ___

城市：_ __ _ __ _ __ _ ___

我需要它看起来像这样......

姓名：_ __ _ __ _ __ _ __ _ __

地址：_ __ _ __ _ __ _ ___

城市：_ __ _ __ _ __ _ __ _ ____

我可以这样做而不必在每个文本字段上设置固定宽度吗？

4

2 回答 2

1

当然，这可能不是最有效的方法，但您可以为每个字段制作一个单独的表。

HTML

<table>
    <tr>
        <th>Name:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>Address:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>City:</th>
        <td><input type="text"></td>
    </tr>
</table>

​CSS 

table { width: 300px; }
td { border-bottom: 1px solid black; }
th { width: 1em; }

input { width: 100%; border: none; }
input:focus { outline: none; }

​ ​ JS 小提琴： http: //jsfiddle.net/BUy6f/2/ ​</p>

于 2012-07-16T17:48:36.340 回答
-1

您可以使用无边框表格，如下所示：示例

于 2012-07-16T17:26:12.137 回答