HTML两端对齐

最新推荐文章于 2024-04-23 13:46:57 发布

qq_42814498

最新推荐文章于 2024-04-23 13:46:57 发布

阅读量3k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_42814498/article/details/103366419

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我做的是用户名和密码的两端对齐

直接上代码，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<style>
			body{
				font-family: "微软雅黑";
				font-size: 15px;;
			}
			#sectionOne{
				width: 300px;
				height: 150px;
				margin:0 auto;
				background-color: aliceblue;
				border: solid 1px cadetblue;
				padding: 20px;
			}
			.loginMain{
				width: 70px;
				height: 20px;
				display: inline-block;
				text-align: justify;
				text-justify:inter-ideograph;
				float: left;
			}
			div.loginMain > span{
				padding-left: 100%;
				display: inline-block ; 
			}
		</style>
	</head>
	<body>
		<section id="sectionOne">
			<div class="loginMain">用户名：<span></span></div>
			<input type="text" id="userName" placeholder="请输入用户名"/>
			<br/>
			<br/>
			<div class="loginMain">密码：<span></span></div>
			<input type="text" id="passWord" placeholder="请输入密码" />
		</section>
	</body>
</html>

运行结果
用户名和密码的两端对齐

关于style中的 text-justify: 详见CSS3 text-justify 属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_42814498

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML两端对齐

我做的是用户名和密码的两端对齐直接上代码，<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>login</title> <style> body{ font-family: "微软雅黑"; font-siz...
复制链接

扫一扫