CSS – 固定宽度的 span/div

在本文中，我们将介绍如何使用CSS设置固定宽度的span和div元素。固定宽度的元素在网页设计中是非常常见的，可以用于创建块级元素或者内联元素，并控制它们的宽度以适应设计需求。

阅读更多：CSS 教程

固定宽度的块级元素

要创建一个固定宽度的块级元素，我们可以使用CSS的width属性。width属性用于定义一个元素的宽度，可以是一个具体的像素值，也可以是一个百分比值。

例如，我们可以创建一个固定宽度为300像素的div元素：

<div class="fixed-width">
  这是一个固定宽度的div元素。
</div>

然后在CSS样式表中添加以下代码：

.fixed-width {
  width: 300px;
}

使用这样的CSS代码，我们可以确保div元素始终具有300像素的宽度。

固定宽度的内联元素

要创建一个固定宽度的内联元素，我们可以使用CSS的display属性和width属性。display属性用于定义一个元素的显示类型，可以设置为”inline”、”inline-block”或”inline-table”等值。

例如，我们可以创建一个固定宽度为200像素的span元素：

<span class="fixed-width-inline">
  这是一个固定宽度的span元素。
</span>

然后在CSS样式表中添加以下代码：

.fixed-width-inline {
  display: inline-block;
  width: 200px;
}

使用这样的CSS代码，我们可以确保span元素始终具有200像素的宽度，并且可以与其他内联元素并排显示。

示例

下面是一个完整的示例，展示如何创建固定宽度的块级元素和内联元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    .fixed-width {
      width: 300px;
    }

    .fixed-width-inline {
      display: inline-block;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="fixed-width">
    这是一个固定宽度的div元素。
  </div>

  <br>

  <span class="fixed-width-inline">
    这是一个固定宽度的span元素。
  </span>
</body>
</html>

在上面的示例中，我们使用了CSS的width属性和display属性来创建固定宽度的div和span元素。通过调整width属性的值，可以轻松改变元素的宽度。