html - 如何在中心对齐表格,但标签在输入的最左侧上方
问题描述
我想“嘿,让我们在睡前用表格练习 10 分钟......”是的......已经一个小时了,我想不通!
我希望所有内容都居中,除了标签,我希望它位于输入上方,在最左边。当然,如果我调整窗口大小,我希望它“跟随”输入,否则我可以调整 px 中的位置。
我该怎么做?非常感谢!
* {
margin: 0;
box-sizing: border-box;
}
.form1 {
background: linear-gradient(to right bottom, deepskyblue, pink);
margin: 10px;
border: 1px solid black;
padding: 50px 150px;
display: flex;
flex-direction: column;
font-family: helvetica;
font-size: 14px;
}
.space:focus {
outline-color: black;
}
.space {
width: 300px;
}
.submit {
width: 30vw;
align-self: center;
background: linear-gradient(to top left, rgb(255,105,200), aqua);
border: none;
border-radius: 20px;
padding: 5px;
font-family: verdana;
font-weight: 600;
}
<div class="form1">
<label for="name">Name</label>
<input class="space" type="text" id="name"><br><br>
<label for="email">E-mail</label>
<input class="space" type="email" id="email"><br><br>
<label for="message">Message</label>
<textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br>
<input type="submit" class="submit" value="Send">
</div>
解决方案
想要这个结果?
* {
margin: 0;
box-sizing: border-box;
}
.form1 {
background: linear-gradient(to right bottom, deepskyblue, pink);
margin: 10px;
border: 1px solid black;
padding: 50px 150px;
display: flex;
flex-direction: column;
align-items: center;
font-family: helvetica;
font-size: 14px;
}
.form1 label {
max-width: 300px;
width: 100%;
}
.space:focus {
outline-color: black;
}
.space {
/*width: 300px;*/
max-width: 300px;
width: 100%;
}
.submit {
/*width: 30vw;*/
max-width: 300px;
width: 100%;
align-self: center;
background: linear-gradient(to top left, rgb(255,105,200), aqua);
border: none;
border-radius: 20px;
padding: 5px;
font-family: verdana;
font-weight: 600;
}
<div class="form1">
<label for="name">Name</label>
<input class="space" type="text" id="name"><br><br>
<label for="email">E-mail</label>
<input class="space" type="email" id="email"><br><br>
<label for="message">Message</label>
<textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br>
<input type="submit" class="submit" value="Send">
</div>
推荐阅读
- angular - 从打字稿中的指定位置将元素添加到数组
- vuetify.js - 当我在浏览器上运行此代码时,工具栏出现在底部我怎样才能使它在浏览器顶部
- php - PHP - Foreach 变量
- python - Python拆分并从文本文件中查找特定字符串
- regex - 如何将 YouTube 的喜欢和不喜欢以及 YouTube 中的比率导入 Google 表格?
- mongodb - MongoDB Atlas 是否支持向下钻取功能?
- sql - 需要 SQL 查询 - 倒数 365 天
- swift - viewWillEnterForeground 问题
- javascript - 从 node.js 脚本中止 npm 构建脚本
- highlight - Spacemacs 黄线