Question

我有一个简单的HTML表单，上面有四个输入小部件（见下文）...两行每行有两个小部件。然而，当这呈现时它非常难看。我希望整个表单从左侧页面的边缘缩进，例如40px，我希望小部件的左边缘相互对齐，标签的右边缘排成一行。我还希望能够指定第一个窗口小部件的右边缘与其旁边的窗口小部件的标签之间的最小距离。我怎么用CSS做这个？基本上它看起来像：

            Name:  _____________     Common Names:  _____________
         Version:  ____________            Status:  ____________

请参阅下面的当前未格式化的HTML：

<form name="detailData">
<div id="dataEntryForm">
<label>
 Name:  <input type="text" class="input_text" name="ddName"/>  Common Names: <input type="text" class="input_text" name="ddCommonNames"><P>
 Version: <input type="text" class="input_text" name="ddVer"/>  Status:  <select name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option>
</label>
</div>
</form>

Answer 1

基本启动示例：

<div id="dataEntryForm">
    <div class="entry">
        <label for="ddName">Name:</label>
        <input type="text" class="input_text" id="ddName" name="ddName">
    </div>
    <div class="entry">
        <label for="ddCommonNames">Common Names:</label>
        <input type="text" class="input_text" id="ddCommonNames" name="ddCommonNames">
    </div>
    <div class="entry">
        <label for="ddVer">Version:</label>
        <input type="text" class="input_text" id="ddVer" name="ddVer">
    </div>
    <div class="entry">
        <label for="ddStatus">Status:</label>
        <select id="ddStatus" name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option></select>
    </div>
</div>

使用这个CSS：

#dataEntryForm {
    width: 600px;
}
#dataEntryForm .entry {
    float: left;
    width: 300px;
}
#dataEntryForm .entry label {
    display: inline-block;
    width: 150px;
    text-align: right;
}

Live demo

Answer 2

对于文本框，您可以执行以下操作：

.input_text {
      background-color:transparent;
      border-top:none;
      border-left:none;
      border-right:none;
      border-bottom:1px solid #000;
}

选择框将更难以这样的样式，你可能想要查看一个Javascript解决方法来设置它的样式。这样的事情会有所帮助：

http://www.mypocket-technologies.com/jquery/SelectBoxPlugin/

Answer 3

http://reisio.com/temp/form1.html

从clear: left;规则中移除li并为width和ul设置li，如果您想要两个或更多并排。

使用CSS格式化这个简单的HTML表单的最佳方法是什么？

3 个答案: