Question

你好，我是html的新手，希望能够按照我在下面的照片中描述的方式定位我的字段和文字，这是我的HTML部分，

https://i.stack.imgur.com/kiw8o.jpg

＆＃13;

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body {
  /* This sets the background for all the pages*/
  background-image: url('static/shard.jpg');
  background-repeat: no-repeat;
  /* 'no-repeat' makes the background not 
        repeat on the web page */
  background-attachment: fixed;
  background-size: 100% 100%;
}

＆＃13;

<form action="{{ url_for('sign') }}" method="post">
  <label for="name">Name</label>
  <input type="text" name="Name" id="name">
  <label for="email">Email</label>
  <input type="email" name="Email" id="email">
  <label for="comments">Comments</label>
  <input type="text" name="Comments" id="comments">
  <input type="submit" value="Sign">
</form>

＆＃13;

Answer 1

对于一个简单的布局，我会做下一个：

<form action="{{ url_for('sign') }}" method="post">
  <label for="name">Name</label>
  <input type="text" name="Name" id="name">
  <label for="email">Email</label>
  <input type="email" name="Email" id="email">
  <label for="comments">Comments</label>
  <input type="text" name="Comments" id="comments">
  <input type="submit" value="Sign">
</form>
<style>
  form {
    display:  flex; 
    flex-direction:  column; 
    align-items:  center; 
    justify-content:  center; 
  }
</style>

这仅适用于布局。检查此参考以进行布局：Flexbox Layouts

请注意不要使用<font>标记，因为它们现已在HTML5中弃用

输入字段的CSS格式

1 个答案: