代码之家 › 专栏 › 技术社区 › GregH

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

css html

GregH · 技术社区 · 15 年前

我有一个简单的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>

3 回复 | 直到 15 年前

BalusC 15 年前

基本启动示例:

<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 .

Jimmy 15 年前

对于文本框,可以这样做:

.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/