基础 CSS 表单标签定位

在 Web 开发中，表单是非常常见的元素。通过基础 CSS 表单标签定位，我们可以实现对表单中各个元素的布局与定位。下面介绍一些常用的 CSS 属性和样式，用于定位表单标签。

display 属性

display 属性指定当前元素应该被显示的类型。常用的值有：block、inline、inline-block、none 等。

• block：元素将被显示为块级元素，占满整个父容器的宽度。例如 <div> 元素。
• inline：元素将被显示为行内元素，并会尽可能的与周围的文本或者其他行内元素排列在一起。例如 <span> 元素。
• inline-block：元素将被显示为行内块级元素，既可以设置宽高，又可以水平排列，通常用于布局导航条等。例如 <input> 元素。
• none：元素将被隐藏，不占用页面空间。

/* 将 <input> 元素设置为行内块级元素 */
input {
  display: inline-block;
}

position 属性

position 属性用于设置元素的定位方式，常用的值有：static、relative、absolute、fixed。

• static：默认值，不进行定位。
• relative：相对于元素本身的位置，进行定位。偏移量可以通过 top、right、bottom、left 属性来设置。
• absolute：相对于离它最近的已定位的父元素进行定位，并且会脱离文档流。如果没有已定位的父元素，则相对于 body 元素进行定位。
• fixed：与 absolute 类似，不过相对于浏览器窗口进行定位。即便页面滚动，它的位置也不会改变。

/* 将 <label> 元素相对于它的父元素进行定位 */
label {
  position: relative;
  left: 20px;
  top: 5px;
}

float 属性

float 属性用于设置元素在布局中的浮动方式。常用的值有：left、right、none。

• left：元素向左浮动
• right：元素向右浮动
• none：元素不浮动

/* 将 <input> 元素向左浮动 */
input {
  float: left;
}

clear 属性

当一个元素浮动之后，为了防止它对其他元素造成影响，可以通过 clear 属性来清除浮动。

• left：元素下方不允许有左浮动的元素
• right：元素下方不允许有右浮动的元素
• both：元素下方不允许有浮动的元素
• none：默认值，不清除浮动

/* 清除 <div> 元素下方的浮动 */
div {
  clear: both;
}

示例代码

下面是一个简单的例子，用于说明如何使用 CSS 样式定位表单中的元素。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

  <br>

  <input type="submit" value="登录">
</form>

form {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

input {
  display: inline-block;
  width: 200px;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
}

input[type="submit"] {
  width: 100px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

运行结果：

以上就是关于基础 CSS 表单标签定位的简单介绍，希望对大家有所帮助。