这是在今年做百度前端技术学院task_1_3的任务是遇到的，后来利用文本框的text-align：right解决了。由于在默认情况下，他们是左对齐的，但是为了好看，而且我们平时看到的多个输入框基本都是右对齐，在不设置输入框大小的情况下，可以使用text-align：right实现输入框的右对齐，效果如封面图所示，form表格的宽度设置不是必须的，这里只是为了让大家看的更明显，所以设置了宽度，但是如果不给form设置宽度，在设置text-align：right后，输入框会找父元素的右边框对齐，具体实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
</head>
<style>
.main{
width:800px;
height:500px;
border:4px solid yellow;
margin:0 auto;
}
form{
width:500px;
text-align:right;
border:1px solid red;
}
.text{
font-size:15px;
}
</style>
<body>
<div class="main">
<form>
<label for="username" class="form-label">请输入邮箱地址</label>
<input type="" name="" placeholder="这是一个文本输入框">
<br>
<span class="text">邮箱地址请按要求格式输入</span>
</form>
<form>
<label for="password" class="form-label">请输入密码</label>
<input type="" name="" placeholder="这是一个文本输入框">
<br>
<label for="password" class="form-label">请重复输入密码</label>
<input type="" name="" placeholder ="这是一个文本输入框">
<br >
<span class="text">密码请输入为6-16位英文数字</span>
</form>
</div>
</body>
</html>點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦