对齐 HTML 表格中的内容答案

【问题标题】：Aligning content in an HTML table对齐 HTML 表格中的内容
【发布时间】：2011-09-16 17:39:43
【问题描述】：

我刚开始学习 HTML 和 ASP.NET 我在对齐表格中的内容时遇到问题。

这是我的代码：

    .cartonTb
    {
        font-size:x-large;
        text-align:right;
    }
    .cartonlnkBtn
    {
        text-align:left;
        font-size:x-large;
    }

   <table >
      <tr>
        <td>
          <table width="800">
               <tr>
                 <td >
                   <asp:Label runat="server"  Text="MODEL NO" class="cartonlnkBtn"  />
                 </td>
                 <td >
                  <asp:TextBox ID="tbCartonModel" runat="server" class="cartonTb" style="width:200px" />
                 </td>
                  <td >
                  <asp:Label   runat="server"  Text="MODEL VERSION" class="cartonlnkBtn"  />
                  </td>
                  <td >
                  <asp:TextBox ID="tbCartonModelVer" runat="server" class="cartonTb" 
                                        style="width:100px"/>
                  </td>
                  </tr>
                  </table>

                   </td>
                     </tr>
                      <tr>
                       <td>
                          <table width="800">
                            <tr>
                                <td >
                                    <asp:Label  runat="server"  Text="PART NO" class="cartonlnkBtn" />
                                </td>
                                <td >
                                   <asp:TextBox ID="tbCartonPartNp" runat="server" class="cartonTb" style="width:200px" />
                                </td>
                               <td > 
                                    <asp:Label  runat="server"  Text="QUANTITY" class="cartonlnkBtn" />
                                </td>
                                <td>
                                  <asp:TextBox ID="tbCartonQty"  runat="server" class="cartonTb" style="width:100px" />
                                </td>

                            </tr>
                        </table>

                        </td>
                    </tr>
                </table>

浏览器中的输出如下所示：

我希望标签和纹理框的起始位置相同。

我想要这样的外观：

【问题讨论】：

标签： html asp.net html-table alignment

【解决方案1】：

使td的宽度一致，内容应该排列得更好。基本上，让每个

<td width="25%"> 或 <td width="200px">

【讨论】：

【解决方案2】：

除了@Jordan 的建议之外，您还需要text-align:left 换成.cartonTb

【讨论】：

【解决方案3】：

出于好奇，您决定在最外层表的行中使用嵌套表是有原因的吗？如果您要改用以下结构，并将 ASP 元素放在外部表的 <td> 标记中（而不是创建新表），那么列将自动调整大小以适合任何行中的最大元素，产生预期的结果。

.cartonTb
    {
        font-size:x-large;
        text-align:right;
    }
    .cartonlnkBtn
    {
        text-align:left;
        font-size:x-large;
    }

   <table >
      <tr>
        <td>
            <asp:Label runat="server"  Text="MODEL NO" class="cartonlnkBtn"  />
        </td>
        <td >
            <asp:TextBox ID="tbCartonModel" runat="server" class="cartonTb" style="width:200px" />
        </td>
        <td >
            <asp:Label   runat="server"  Text="MODEL VERSION" class="cartonlnkBtn"  />
        </td>
        <td >
            <asp:TextBox ID="tbCartonModelVer" runat="server" class="cartonTb" 
                                        style="width:100px"/>
        </td>
      </tr>
      <tr>
        <td>
            <asp:Label  runat="server"  Text="PART NO" class="cartonlnkBtn" />
        </td>
        <td >
            <asp:TextBox ID="tbCartonPartNp" runat="server" class="cartonTb" style="width:200px" />
        </td>
        <td > 
            <asp:Label  runat="server"  Text="QUANTITY" class="cartonlnkBtn" />
        </td>
        <td>
            <asp:TextBox ID="tbCartonQty"  runat="server" class="cartonTb" style="width:100px" />
        </td>
      </tr>
 </table>

我以前从未使用过 ASP，所以我不知道是否有任何 ASP 约定会影响这种结构。

正如 Don 所建议的，您需要将 text-align 更改为 .cartonTb

【讨论】：