Html 如何对齐文本字段？_Html_Css

Html 如何对齐文本字段？

html css

Html 如何对齐文本字段？,html,css,Html,Css,我在JSP页面上有一个登录表单它几乎是完美的，只是文本字段没有正确对齐。我希望我的文本字段看起来像Facebook的登录页面 <!DOCTYPE html> <html> <head> <title></title> <style> div.ex { width:300px; padding:10px; border:5px solid gray;

我在JSP页面上有一个登录表单

它几乎是完美的，只是文本字段没有正确对齐。我希望我的文本字段看起来像Facebook的登录页面

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
    div.ex
    {
        width:300px;
        padding:10px;
        border:5px solid gray;
        margin:0px;
    }

</style>
</head>
<body>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
    <p>
        <label>
            ID
            <input type="text" name="id"/>
        </label>
    </p>
    <p>
        <label>
            password
            <input type="password" name="password"/>
        </label>
    </p>
    <p>
        <label><input type="checkbox" name="rememberMe">Keep me logged in</label>
        <input type="submit" value="login"/>
    </p>
  </form>
</div>
</body>
</html>


除名
{
宽度：300px；
填充：10px；
边框：5px纯灰；
边际：0px；
}
登录页面


身份证件


密码


让我登录

以上是我的JSP脚本，我非常感谢有人能帮助我。

首先从

标签中取出输入
标记。这将对齐输入字段左侧的标签。要使标签显示在输入字段上方，请将其设置为display:block样式
不确定这是否是您的意思，但您可以提供表单元素id，然后像其他任何元素一样使用css控制它们。例如：
<style>
    div.ex
    {
        width:300px;
        padding:10px;
        border:5px solid gray;
        margin:0px;
    }
#idBox {
    margin-left: 45px;
}
#lastRow {
    margin-left: 65px;
}
</Style>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
    <p>
        <label>
            ID
            <input type="text" name="id" id="idBox"/>
        </label>
    </p>
    <p>
        <label>
            password
            <input type="password" name="password"/>
        </label>
    </p>
    <p>
        <div id="lastRow">
            <label><input type="checkbox" name="rememberMe">Keep me logged in</label>
            <input type="submit" value="login"/>
        </div>  
    </p>
  </form>
</div>


除名
{
宽度：300px；
填充：10px；
边框：5px纯灰；
边际：0px；
}
#idBox{
左边距：45像素；
}
#拉斯特罗{
左边距：65px；
}
登录页面


身份证件


密码


让我登录


在HTML中执行此操作：
<p>
    <label for="id">
        ID
    </label>
    <input type="text" name="id"/>
</p>
<p>
    <label for="password">
        password

    </label>
    <input type="password" name="password"/>
</p>

我的css不是最棒的，但我从《视觉快速入门html5和css》一书中改编了这一点
最新版。您只需将“文本对齐”更改为“左对齐”或“右对齐”，即可将标签沿右侧或左侧对齐。如果这有道理的话。希望这有帮助
<form>
<ul id="about_me">
    <li><label>My Height</label>
    <select class="about" name="height">
     option value="">Choose from list</option>
    </select>
     </li>
</ul>
</form>


ul#about_me label
{
 display:inline-block;
 padding:3px 6px;
 text-align:left;
 width:170px;
 vertical-align:top;
 }



我的身高
选项值=”“>从列表中选择


关于我的标签
{
显示：内联块；
填充：3px6px；
文本对齐：左对齐；
宽度：170px；
垂直对齐：顶部；
}
为什么选择45px和65px？我在屏幕上排列它们-我知道这很糟糕，我只是快速地做了。试试这个：父对象现在是相对的，文本框是绝对的，左边是6em-这确保它们排列在相同的位置。如果我有两个以上的文本字段（确切地说是六个），那么，我需要独立地对齐每个字段吗？不，可以使用公共类。例如：。它们都有类“align”，这就是设置边距的原因。
<form>
<ul id="about_me">
    <li><label>My Height</label>
    <select class="about" name="height">
     option value="">Choose from list</option>
    </select>
     </li>
</ul>
</form>


ul#about_me label
{
 display:inline-block;
 padding:3px 6px;
 text-align:left;
 width:170px;
 vertical-align:top;
 }