Question

我在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脚本，我感谢有人可以帮助我。

Answer 1

首先从input中取出label标记。这将对齐输入字段左侧的标签。要使标签显示在输入字段上方，请为其指定样式display: block;

Answer 2

不确定这是不是你的意思，但你可以给表单元素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>

jsFiddle

Answer 3

在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中：

label{
    display:block;
}

Answer 4

我的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;
 }

如何对齐文本字段？

4 个答案: