如何在中心对齐表格，但在输入的最左侧上方有 label

Question

我想“嘿，让我们在睡前用 forms 练习 10 分钟......”是的......已经一个小时了，我想不通！

我希望所有人都居中，除了 label，我希望它位于输入上方，在最左边。 当然，如果我调整 window 的大小，我希望它“跟随”输入，否则我可以以像素为单位调整 position。

我该怎么做？ 非常感谢！

 * { 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>

Answer 1

想要这个结果？

 * { 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>

Answer 2

您可以将一些 css 添加到 label，因为您提供了宽度为 300 的输入，将相同的输入提供给 label 并且它可以工作。

 .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; align-items: center; font-size: 14px; }.form1 label { display: flex; justify-content: flex-start; width: 300px; }.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>