HTML 中使用 span 元素设置位置

span 元素是 HTML 中用于对文本进行样式设置的内联元素。虽然它本身没有固定的位置属性，但我们可以通过 CSS 样式来对其进行定位。

设置绝对位置

使用 将 span 元素设置为绝对位置。这会将其从正常文档流中移除，并允许我们通过 , , 和 属性来设置其确切位置。

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;span {
  position: absolute;
  top: 10px;
  right: 20px;
  background-color: yellow;
  padding: 5px;
}</code>

设置相对位置

将 span 元素设置为相对位置。它会相对于其正常文档流的位置进行偏移。我们可以使用 , , 和 属性来偏移其位置。

<code class="css">span {
  position: relative;
  top: 20px;
  left: 10px;
  background-color: green;
  padding: 5px;
}</code>

使用浮动

使用 或 可以让 span 元素浮动到页面的一侧。此方法不受容器大小的限制，因此 span 元素可以浮动超出其容器的边界。

<code class="css">span {
  float: left;
  background-color: blue;
  padding: 5px;
}</code>

使用 flexbox

flexbox 是一组 CSS 属性，允许我们控制元素的布局和位置。我们可以使用 , 和 属性来设置 span 元素的位置。

<code class="css">.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

span {
  background-color: orange;
  padding: 5px;
  margin: 0 5px;
}</code>