gpt4 book ai didi

css - 对齐 HTML5 表单元素

转载 作者:可可西里 更新时间:2023-11-01 13:12:41 25 4
gpt4 key购买 nike

我是 HTML5 的新手,所以非常感谢能得到的所有帮助。我有三个字段(名字、姓氏和出生日期),我正在尝试将它们对齐。我想将字段水平和垂直对齐。

到目前为止,这是我的简单代码:

<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>

这是我的 CSS:

input[type=text] {
border: 1px solid #D4E2F1;
}

input[type=date] {
border: 1px solid #D4E2F1;
}

input[type=color] {
border: 1px solid #D4E2F1;
}

我不想使用表格,因为我不想显示表格数据。我正在寻找一种有效且正确的方法来做到这一点。

非常感谢您的帮助。

谢谢。阿杰

最佳答案

试试这个:

HTML:

<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>

CSS:

.user-form { padding:20px; }

.user-form .field { padding: 4px; margin:1px; background: #eee; }

.user-form .field label { display:inline-block; width:120px; margin-left:5px; }

.user-form .field input { display:inline-block; }

jsFiddle:http://jsfiddle.net/VuSX4/

关于css - 对齐 HTML5 表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17825979/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com