c# - CSS - 在单个 DIV 中并排放置元素，对齐

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>

它会按照您想要的方式显示...希望您可以将其用作模板。