Question

我有以下HTML代码。我正在尝试对齐文本框，使它们排列在另一个之下。我有下面的CSS。不成功。请注意，.Label和.TextBoxFor仅用于创建和标签和文本框。

   <div style="text-align: left; width: 1000px"> 
    <fieldset>
     <legend>Information</legend>
      <div class="form-element-row">    
       @Html.Label("Collector")
       @Html.TextBoxFor(model => model.Collector)
      </div>
      <div style="clear:both"></div>
      <div class="form-element-row">
       @Html.Label("Email")
       @Html.TextBoxFor(model => model.Email)
      </div>
    </fieldset>

这是css

 .form-element-row
 {
    float: left;
 }

 .form-element-row label
 {
    margin: 0px;
    min-width: 400px;
 }

.form-element-row input
{
  margin: 0px;
  width: 500px;
}

Answer 1

尝试将表单显示为列表项，如下所示：

.form-element-row label, .form-element-row textarea {
   display: list-item;
   list-style: none;
 }

Answer 2

最简单的方法是使用表格。这样您就不必担心任何对齐。你可以这样做：

<div style="text-align: left; width: 1000px"> 
            <fieldset>
             <legend>Information</legend>
            <table>
                <tr>
                    <td style ="width:30%;">
                        XXX
                    </td>
                    <td>
                        <input type="textbox"/>
                    </td>
                </tr>
                <tr>
                     <td>
                        YyYY
                    </td>
                    <td>
                        <input type="textbox"/>
                    </td>    
                </tr>
            </table>    

            </fieldset>
</div>

CSS - 将文本框一个在另一个下方对齐

2 个答案: