Question

我正在尝试构建一个Web表单，但我的目标是出于维护原因尽可能少地编写代码。我所做的基本上是创建一个问卷，我一直在使用两个td来做到这一点。这就是文字的样子......

1. Here is an example of what I mean when I do this.           DropDown
This is what I mean.

我希望看起来像是......

1. Here is an example of what I mean when I do this.           DropDown
   This is what I would like for it to look like.

我知道我能够获得数字（1。）的TD，然后是实际文本的另一个TD，以及DropDown的第3个TD。

这是我的代码的样子。

 <table style="width:100%"
 <tr>
     <td>
         2.&nbsp;&nbsp;This is an example of the text that I use in my web application.
     </td>
     <td>
         <asp:DropDownList ID="drpID2" runat="server" Width="100px">
          </asp:DropDownList>
     </td>
  </tr>
 </table>

我是否可以使用任何CSS / HTML技巧来解决这个问题，我有大约80个问题，而添加另一个TD最终会得到更多的代码。

Answer 1

这是你想要做的吗？在第一行之后缩进每一行，使其与数字后的文本对齐？

＆＃13;

td {
    padding-left: 1.5em;
    text-indent:-1.3em;
}

＆＃13;

 <table style="width:100%"
 <tr>
     <td>
         2.&nbsp;&nbsp;This is an example of the text that I use in my web application.
         <br/>
         This is what I would like for it to look like.
         <br/>
         This is what I would like for it to look like.
     </td>
     <td>
         <asp:DropDownList ID="drpID2" runat="server" Width="100px">
          </asp:DropDownList>
     </td>
  </tr>
 </table>

＆＃13;

Answer 2

您也可以使用CSS计数器和伪：

table {
  counter-reset: tr
}

tr:before {
  counter-increment: tr;
  content: counter(tr);
  display: table-cell;
  padding: 0 1em;
}

<table style="width:100%">
  <tr>
    <td>
      This is an example of the text that I use  <br/>
      in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of the text <br/>
      that I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of <br/>
       the text that <br/>
       I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of the text <br/>
       that I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of the text that I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
</table>

仅使用两个td格式化表格

2 个答案: