html - 如何对齐文本字段?

标签 html css

我在 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>

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

最佳答案

首先从 label 中取出 input 标签。这会将标签对齐到输入字段的左侧。要使标 checkout 现在输入字段上方,请为其设置 display: block;

样式

关于html - 如何对齐文本字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20666353/

相关文章:

html - 使用 CSS 的相对大小标题

html - 网站上出现水平滚动条

jquery - footable:removeClass 不适用于扩展行

javascript - 如何使用 Javascript 添加另一个文本装饰定义?

javascript - 可见光JS : Cant make network fit bootstrap panel

javascript - 如何禁用浏览器左下角的 href 显示?

jquery - 使用 jQuery UI 拖动并悬停在某个 div 上时更改可拖动元素的内容

css - 通过透明背景图像显示背景颜色

html - 图像周围的动画圆圈边框?

html - 无法让提交框显示在文本框下方