[分享]css中如何让表单竖着排列

CSS是网页设计中不可或缺的一部分。在表单设计中，有时我们需要让表单竖着排列，这样使得表单更加简洁美观。下面我们来看一下CSS如何实现这个功能。/HTML代码/ 姓名: 性别: 男 女 爱好: ...

CSS是网页设计中不可或缺的一部分。在表单设计中，有时我们需要让表单竖着排列，这样使得表单更加简洁美观。下面我们来看一下CSS如何实现这个功能。

/*HTML代码*/
<form>
  <label>姓名:</label>
  <input type="text" name="name">
  <br><br>
  <label>性别:</label>
  <input type="radio" name="gender" value="0">男
  <input type="radio" name="gender" value="1">女
  <br><br>
  <label>爱好:</label>
  <input type="checkbox" name="hobby" value="0">游泳
  <input type="checkbox" name="hobby" value="1">唱歌
  <input type="checkbox" name="hobby" value="2">跑步
  <br><br>
  <label>出生日期:</label>
  <input type="date" name="birthday">
  <br><br>
  <input type="submit" value="提交">
</form>

/*CSS代码*/
form {
  display: flex;
  flex-direction: column;
}

上面的代码中，我们首先定义了一个form标签，然后用CSS的flex布局把它的子元素竖着排列。其中，flex-direction属性用来设置元素排列的方向，column表示竖排。

在HTML代码中，每个表单元素的标签都和它对应的标签在同一个