Question

我刚刚开始学习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>

浏览器中的输出如下所示： enter image description here

我希望标签和texbox的起始位置相同。

我想看看这个样子： enter image description here

Answer 1

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

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

Answer 2

除了@Jordan的建议，您需要text-align:left .cartonTb

Answer 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

对齐HTML表格中的内容

3 个答案: