如图所示，如何将名字姓氏放在文本框的顶部答案

【问题标题】：How to place the first name last name on top of the textbox as in the picture如图所示，如何将名字姓氏放在文本框的顶部
【发布时间】：2012-08-10 05:07:29
【问题描述】：

我已经看到了，但我不知道该怎么做......或者用什么来环绕文本框来完成这个。

我以为可以用字段集来完成，但我可能错了。

我附上了一张图片，希望能传达我的观点。

谢谢你..

【问题讨论】：

我认为使用 Web 用户控件可能是可能的，如果没有，那么您应该尝试自定义服务器控件。

标签： javascript asp.net css asp.net-mvc

【解决方案1】：

这是在没有表格的情况下执行此操作的一种方法。

CSS：

<style>
div{
width:150px
}
div label{
clear:left;
font-size:9px;
}
</style>

还有 HTML：

<div><label>First</label><input type="text" id="firstName" /></div>

【讨论】：

【解决方案2】：

这里

<div class="section">
    <div class="left">
        Name
    </div>
    <div class="right">
        <div class="nm">
            First
        </div>
        <div class="val">
            <asp:TextBox runat="server" ID="txtBox1"></asp:TextBox>
        </div>
    </div>
    <div class="right">
        <div class="nm">
            Last
        </div>
        <div class="val">
            <asp:TextBox runat="server" ID="txtBox2"></asp:TextBox>
        </div>
    </div>
</div>

风格：

<style>
    .section
    {
        clear: both;
        }
        .section .left
        {
            float: left;
            font-size: 25px;
            padding:5px;
            padding-top:15px;

        }
        .section .right
        {
            float: left;
            padding:5px;

            }
            .section .right .nm
            {
                font-size: 10px;
            }
            .section .right .val
            {
            }
</style>

【讨论】：

【解决方案3】：

可能有人会为此向我开枪，但一张桌子可以让这件事变得很容易..

<table style="width:375px;" cellspacing="0" cellpadding="2">
    <col width="75px">
    <col width="150px">
    <col width="150px">
    <tr>
        <td></td>
        <td>first</td>
        <td>last</td>
    </tr>
    <tr>
        <td>
            NAME
        </td>
        <td>
            <input type="text" id="firstName" />
        </td>
        <td>
            <input type="text" id="lastName" />
        </td>
    </tr>
</table>

如果您也愿意，我可以使用<divs> 制作一个..

编辑：我不熟悉任何可以自动执行此操作的 .NET 控制器，除非它是自定义的..

【讨论】：

我知道这种方法，我想知道是否有更好的方法来做到这一点。我不认为这是另一个 td 而是他们使用其他东西。
看到Waqar 的评论后，我意识到你的意思。我不确定，抱歉:(

【解决方案4】：

应该这样做：

<table>
       <tr>
          <td>
             Name
          </td>
          <td>
             Html.LabelFor(m => m.First)
             Html.TextBoxFor(m => m.First)
          </td>
          <td>
             Html.LabelFor(m => m.Last)
             Html.TextBoxFor(m => m.Last)
          </td>
      </tr>
    </table>

【讨论】：