将标签与网页上的文本框对齐 [英] Align labe with textbox on web page

查看:66
本文介绍了将标签与网页上的文本框对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试通过Visual Web Developer 2010 Express建立一个GUI网站,以便用户输入信息...
我正在使用标签和文本框.
我在将它们设置为出现在窗口中间但正确对齐时遇到问题.在某种形式上,它们位于一个段落(

I''m trying to set up a GUI website via Visual Web Developer 2010 Express for a user to enter information...
I''m using Labels and Text Boxes.
I''m having a problem setting them up to appear in the middle of the window but aligned properly. In a form, they are within a paragraph (

Name:     ___________
City:     ___________
State:    ___________
Zip Code: ___________



我似乎无法做到这一点!

我正在尝试使用Format->对齐->左,但是它是灰色的,所以我假设它不是asp:label的选项.
我也尝试使用格式->设置位置->相对并手动移动它,但它仍未居中.

这是我的代码...



I can''t seem to accomplish this!

I was trying to use Format --> Align --> Lefts, but it is greyed out, so I''m assuming it''s not an option for an asp:label.
I also tried using Format --> Set Position --> Relative and manually moving it, but it is still not centering.

This is my code...

<p style="height: 173px" align="center" class="style2" Width="100%">
    <asp:Label ID="LabelName" runat="server"
        style="font-family: Arial; position: relative; top: 0px; left: 0px; color: #000066; font-weight: 700" Width="50px"
        Text="Name:" ForeColor="#000066"></asp:Label>
    <asp:TextBox ID="TextBoxName" runat="server"
        style="color: #000066; font-family: Arial; position: relative; top: 0px; left: 51px;" Width="168px"
        ontextchanged="TextBoxName_TextChanged" ForeColor="#000066"></asp:TextBox>
        <br />
    <asp:Label ID="LabelCity" runat="server"
        style="font-family: Arial; position: relative; top: 2px; left: 0px; color: #000066; font-weight: 700" Width="50px"
        Text="City:" ForeColor="#000066"></asp:Label>
    <asp:TextBox ID="TextBoxCity" runat="server"
        style="color: #000066; font-family: Arial; position: relative; top: 2px; left: 51px;" Width="168px"
        ontextchanged="TextBoxCity_TextChanged" ForeColor="#000066"></asp:TextBox>
        <br />
</p>



这对某些人来说可能是微不足道的,但是我对此并不陌生,希望对您有所帮助!
谢谢,
Cindy



This might be trivial to some, but I''m new at this and would like any help!
Thanks,
Cindy

推荐答案

您可以尝试使用 HTML表格 [ ^ ].

[更新]
尝试删除表上的align=center并将其替换为
You can try using HTML Tables[^].

[Update]
Try removing align=center on your table and put this instead
style="margin: 0 auto;"



我已经对此进行了测试,即使您的表位于<p>



I have tested this and it works even when your table is inside a <p>


try this code

you will see on this sample below on how you will use CSS 
Structured, Organize and Reusable


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
        .lbl{font-family: Arial; color: #000066; font-weight: 700}
        .txtbox{color: #000066; font-family: Arial}
        .paddingRight{ padding-right:10px;}
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <table align="center" cellspacing="0" cellpadding="0">
        <tr>
            <td align="right" class="paddingRight">
                <asp:label id="LabelName" cssclass="lbl" runat="server" text="Name:" xmlns:asp="#unknown" />
            </td>
            <td>
                <asp:textbox id="TextBoxName" cssclass="txtbox" xmlns:asp="#unknown">
                    Width="168px" OnTextChanged="TextBoxName_TextChanged" runat="server">
                    </asp:textbox>
            
            </td>
        </tr>
        <tr>
            <td align="right" class="paddingRight">
                <asp:label id="LabelCity" cssclass="lbl" text="City:" runat="server" xmlns:asp="#unknown" />
            </td>
            <td>
                <asp:textbox id="TextBoxCity" cssclass="txtbox" xmlns:asp="#unknown">
                    Width="168px" OnTextChanged="TextBoxCity_TextChanged" runat="server"></asp:textbox>
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>



接受解决方案或投票
如果这对您有帮助
谢谢



Accept Solution or vote
if this will help you
thanks


这篇关于将标签与网页上的文本框对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆