登陆时标签和文本框的居中问题

HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<label>用户名:<input type="text" name="username"></label>
<label>密码:<input type="text" name="password"></label>
</body>
</html>

CSS:

input{
	vertical-align: middle;;
	width: 200px;
	height: 30px;
	border: 2px solid gold;
	line-height: 30px;
}

input:focus{
	background: blue;
}

有以下几点要注意:

1.如何让用户名和用户名后面的那个文本框的中心线统一,在文本框的css样式中应用vertical-align:middle

2.如何让文本框内的输入内容居中,将文本框的高度和行高设置为同一大小,即height:30px;line-height:30px;

3.至于本例中的input:focus则是引用了css的伪类,当文本框或得焦点后改变其样式,亦可用js实现,在此仅作纪录,与本文主题无关。

阅读更多
个人分类: CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭