Question

如何使用CSS并排放置元素，我想对齐所有控件（如下图所示）

到目前为止我试过这个，

.page-main { width: ???; margin: 0 auto; }

.page-element { padding: 10px 0px; display: inline-block; }
.page-element label { color: #232456; padding-left: 10px; }
.page-element input[type="text"] { padding: 2px; width: 67%; }
.page-element .field-validation-error { background: #efd2d2; border: 1px solid #efa198; color: #e8211f; width: 100%; text-align: center; padding: 0px 5px; }

<div class="page-element">
    @Html.LabelFor(x => x.ID)
    @Html.TextBoxFor(x => x.ID)
</div>
--------------------------------------------
|Label  |Text           |Validation Message |
--------------------------------------------
|Label  |Big TextArea   |Validation Message |
--------------------------------------------
|Label  |Dropdown       |Validation Message |
--------------------------------------------
|Label  |Text           |Validation Message |
--------------------------------------------

Answer 1

我有一张表格，这是我的剧本：

<div class="dnnForm dnnEdit dnnClear" id="dnnEdit">


<fieldset>
 <div class="dnnFormItem">
  <table class="dnnFormItem">
   <tr>
    <td>           
     <dnn:label id="plField" runat="server" text="SendTo" helptext="Enter a value" 
controlname="txtField" />
      <td>
       <asp:textbox id="txtField" runat="server" maxlength="255" />   
   </tr>
   <tr>
    <td>
     <dnn:label id="plField2" runat="server" text="Subject" helptext="Enter a value" 
controlname="txtField"/>            
      <td>
       <asp:textbox id="txtField2" runat="server" maxlength="255" />
   </tr>    
   <tr>
    <td>
    <dnn:label id="plField3" runat="server" Text="Message" helptext="Enter a value" 
controlname="txtField" />
     <td>
      <dnn:TextEditor ID="txtField3" runat="server" width="90%" DefaultMode="Rich" 
HtmlEncode="true" />   
   </tr>
  </table>      
 </div>     
  <Center>
   <ul class="dnnActions dnnClear">
    <li>         
      <asp:linkbutton style="color: white" id="cmdSave" text="Send Email" 
runat="server" width="200%" cssclass="dnnPrimaryAction" />
    </li>
   </ul>
  </Center>
</fieldset>
 </div>

它会显示你想要它......希望你能用它作为模板。

Answer 2

这是你想要的吗？

http://jsfiddle.net/AY9hX/

只需使用自定义宽度制作所有元素display: inline-block。

我认为这会导致问题，因为宽度，您可能需要在更大的div上添加宽度，然后在标签，宽度和错误框上添加特定宽度。如果您想将它们全部对齐，请使用

vertical-align: top;

请使用updated version

再试一次

Answer 3

更改为显示：块;浮动：左;

CSS - 将元素并排放置在单个DIV，Alignment中

3 个答案: