为什么我的 text-align 属性不适用于我的跨度？ [复制]答案

【问题标题】：Why isn't my text-align property applying to my span? [duplicate]为什么我的 text-align 属性不适用于我的跨度？ [复制]
【发布时间】：2021-11-02 21:43:56
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      text-align: right;
    }
    </style>
  </head>
  <body>

    <span class="right">test</span>
  </body>
</html>

我希望在右侧显示“测试”，但它不起作用。如果我将 span 更改为 div，它可以工作。这是为什么？我想要跨度，但不是 div。在以下示例中，我希望“姓名”显示在页面右侧，但与“年龄”在同一行。但是“span”标签并不能胜任。

<span>age</span>  <span class="right">name</span>

【问题讨论】：

这是因为标签的默认display 样式，div 有display: block，它获取整行（可用宽度的100%），span 默认有dispaly: inline，这意味着它里面的内容定义宽度，因此如果您没有将 span 的宽度设置为大于内容的值，则 text-align 到 span 无效

标签： html

【解决方案1】：

<span> 元素是一个内联容器，它根据内容占用空间。 <div> 是一个块元素，它完全占据了父容器。因此，如果您希望它与 <span> 一起使用

您可以设置display: block:

<!DOCTYPE html>
    <html>
      <head>
        <title>Title of the document</title>
        <style>
        .right {
          text-align: right;
          display: block;
        }
        </style>
      </head>
      <body>

        <span class="right">test</span>
      </body>
    </html>

您可以使用float 代替text-align 与span

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      float: right;
    }
    </style>
  </head>
  <body>

    <span class="right">test</span>
  </body>
</html>

第二个例子也一样：

    <!DOCTYPE html>
    <html>
      <head>
        <title>Title of the document</title>
        <style>
        .right {
          float: right;
        }
        </style>
      </head>
      <body>

        <span>age</span>  <span class="right">name</span>
      </body>
    </html>

【讨论】：

是的，它奏效了。 text-align 和 float 有什么区别？
@marlon。 float 将容器向右移动，但 text-align 将容器内的文本向右移动

【解决方案2】：

span 是一个内联元素。它的宽度是它的内容。因此，虽然span 的内容向右对齐，但并不明显。

另一方面，divs 是块元素，将跨越容器的宽度。

如果你想将span 向右对齐，你应该把它包裹在一个div 中并应用text-align:right 到它：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      text-align: right;
      width:100%;
    }
    </style>
  </head>
  <body>

    <div class="right"><span>test</span></div>
  </body>
</html>

【讨论】：

【解决方案3】：

原因是因为<div> 的默认display 属性为block，但<span> 的默认display 属性为inline。

将您的 .right 类更改为包含 display: block;，它对两者都有效。

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .right {
      display: block;
      text-align: right;
    }
    </style>
  </head>
  <body>

    <span class="right">test</span>
  </body>
</html>

<span> 文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

【讨论】：