html - 如何在表格中正确放置联系表格？

Question

我正在尝试在此处的表格联系表中正确添加 s 之间的间距:http://jsfiddle.net/k6XSp/1/ .

我想让右侧的字段与右侧消息框的宽度对齐，这意味着我需要在两个 s 中的每个 s 之间添加空格。

它看起来不错，但我不知道如何分隔字段的右侧。添加 margin-right 似乎可以解决问题，但效果不是很好，因为它很容易出错。

此外，当您单击字段时，表单会四处移动，因为会显示边框。

文本字段的 CSS 如下所示:

#contact-area input, #contact-area textarea  {
    padding: 5px;
    width: 451px;
    font-family: Helvetica, sans-serif;
    font-size: 1.4em;
    margin: 0px 0px 10px 0px;
    border: none;
    background-color: #dedede;
    height: 40px;
}

Answer 1

看看这个 fiddle http://jsfiddle.net/k6XSp/6/ .按照建议，尽量不要使用表格来定位元素。请改用 css。

<div class="control-group">
            <label for="FirstName" class="text">First Name:</label>
                <div class="control">
                    <input type="text" name="FirstName" id="FirstName" />
                </div>
            </div>

.control-group {width: auto; float: left; margin: 0 10px 0 0}
.control {display: block; clear: both;}