css - 尝试从表格设计切换到 css 并在排列所有内容时遇到问题

Question

在“过去”，我们可以将所有内容都放入 td 单元格中，并且所有内容都排列得非常好。有了这个 CSS，我有点迷失了如何做一些事情。我遇到的问题是我想使用左侧文本，在右侧填充大约 50px，然后在文本旁边使用输入标签。我得到的是输入框甚至不取决于文本的长度。如果我使用表格设计，td 标签会扩展到最长的文本，然后右边的所有输入都会很好地排列。我如何使用 css 实现这一点？

---

这是我的html

  <li class="mainForm" id="fieldBox_2">
    <label class="formFieldQuestion">Caption: <input class=mainForm type=text name=field_2 id=field_2 size='30' value=''>
      <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>please enter the</span></a>
    </label>
  </li>

和 CSS

#mainForm 
{
    position: relative;
    border: 1px;
    border-style: solid;
    margin: 0 auto;
    text-align: left;
    width: 70%;
    background-color: #ffffff;
}
ul.mainForm
{
    list-style-type: none;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    font-size:15px; 
}
li.mainForm
{
    padding-bottom: 10px;
}

label.formFieldQuestion
{
    line-height:125%;
    padding:0 4px 1px 0;
    border:none;
    display:block;
    font-size:95%;
    font-weight:bold;
}

Answer 1

将输入字段描述放在label标签中，并为标签指定固定宽度的样式。