使用 CSS 在表单上定位元素答案

【问题标题】：Position elements on a form using CSS使用 CSS 在表单上定位元素
【发布时间】：2012-06-04 01:00:32
【问题描述】：

我需要使用 CSS 对齐表单的标签和输入。结果应该是这样的（希望这个简单的方案清晰）：

Label1:    ______
Labellll2: ______
Button

所以，我的 HTML 和 CSS 如下所示。问题是标签放置在输入的顶部，并且按钮位于右侧而不是底部。

<form width="200px" name="optform" method="post" action="#">
        <div class = "boxx">
            <label for="param1">Param1:</label>
            <input type="text" class="input-text" value="5" size="11" maxlength="11" name="param1" id="param1">
            <label for="param2">Param1:</label>
            <input type="text" class="input-text" value="5" size="11" maxlength="11" name="param2" id="param2">
        </div>
        <div class="buttons">
             <a href="#">
                  <img src="images/opt.png" alt=""/> Run 
             </a>
       </div>

div.boxx {
    width: 500px;
}
div.boxx .input-text{
    border:1px solid #A9C7F5;
    color: #00557F;
    font: 12px Arial;
    float:left;
    width:66%;
    margin:0 0 0.5em 0.25em;
}

div.boxx label{
    display:block;
font: 13px Arial;
color:#00557F;
width:33%;
float:left;
text-align:left;
padding-right: 8px;
}
.buttons a, .buttons button {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DFF4FF;
    border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE;
    border-style: solid;
    border-width: 1px;
    color: #565656;
    cursor: pointer;
    font-family: Verdana,arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 130%;
    margin: 10px 10px 0 0;
    padding: 4px 10px 3px 7px;
    text-decoration: none;
}
.buttons button {
    overflow: visible;
    padding: 4px 10px 3px 7px;
    width: auto;
}

【问题讨论】：

标签： css forms alignment

【解决方案1】：

标签需要是

 display:inline-block;

并且您的标签或输入框的宽度过大。填充和边距会导致百分比宽度出现问题，因为它们没有被考虑在内。

这是更新后的 css

div.boxx { 
width: 500px; 
} 
div.boxx .input-text{ 
border:1px solid #A9C7F5; 
color: #00557F; 
font: 12px Arial;     
width:60%; 
margin:0 0 0.5em 0.25em; 
} 

div.boxx label{ 
display:block; 
font: 13px Arial; 
color:#00557F; 
width:33%; 
float:left; 
text-align:left; 
padding-right: 8px; 
} 
.buttons a, .buttons button { 
-moz-border-bottom-colors: none; 
-moz-border-image: none; 
-moz-border-left-colors: none; 
-moz-border-right-colors: none; 
-moz-border-top-colors: none; 
background-color: #DFF4FF; 
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE; 
border-style: solid; 
border-width: 1px; 
color: #565656; 
cursor: pointer; 
font-family: Verdana,arial,sans-serif; 
font-size: 11px; 
font-weight: bold; 
line-height: 130%; 
margin: 10px 10px 0 0; 
padding: 4px 10px 3px 7px; 
text-decoration: none; 
} 
.buttons button { 
overflow: visible; 
padding: 4px 10px 3px 7px; 
width: auto; 
}

【讨论】：

标签仍在文本字段的顶部，但不在左侧
请等待 2 分钟。本网站有等待期。

【解决方案2】：

我知道现代 CSS 人讨厌表格，但在这种情况下（以及 div 的许多对齐问题）我推荐一个漂亮的小表格。

<table>
  <tr>
    <td>Label1: </td><td><input type="text" /></td>
  </tr><tr>
    <td>Label2: </td><td><input type="text" /></td>
  </tr><tr>
    <td>Label3: </td><td><input type="text" /></td>
  </tr>
</table>
<input type="button" />

【讨论】：

【解决方案3】：

试试这样的http://jsfiddle.net/mmyxD/

所有边距/填充是否有原因？你的宽度迫使元素换行。

【讨论】：

【解决方案4】：

您还可以使用 div 和 span。像这样的：

<form action="">
    <div class="row"><span class="label">label1:</span><span class="formw"><input type="text" size="25"></span></div>
    <div class="row"><span class="label">label2:</span><span class="formw"><input type="text" size="25"></span></div>
    <div class="spacer">&nbsp;</div>
</form>

和css：

div.row {
  clear: both;
  padding-top: 10px;
  }

div.row span.label {
  float: left;
  width: 33%;
  text-align: left;
  }

div.row span.formw input{
width: 100%;
}

div.row span.formw {
  float: right;
  width: 66%;
  text-align: left;
  }

【讨论】：