设置跨度标签宽度的问题[重复]答案

【问题标题】：Issue with setting width of span tag [duplicate]设置跨度标签宽度的问题[重复]
【发布时间】：2022-01-20 22:25:46
【问题描述】：

当我将 width: 100% 设置为输入元素时，它会拉伸到其父元素的整个宽度，但随后我对 span 标记执行相同操作，它不会拉伸，而是保持原样，具有与没有设置width: 100% 的宽度相同。 Span 和 input 标签都是内联的，所以我不明白为什么它们的工作方式不同。

你能解释一下为什么会这样吗？

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input {
      width: 100%;
      margin-bottom: 10px;
    }
    
    span {
      width: 100%;
    }
  </style>
  <title>Document</title>
</head>

<form action="#">
  <input type="text">
  <input type="text">
  <input type="text">
</form>
<div class="spanBlock">
  <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui aut obcaecati quod error ipsa. Mollitia,
            officiis excepturi. Accusamus distinctio unde deserunt nobis animi ut nemo quia quidem culpa, voluptas
            temporibus?</span>
</div>
</body>

</html>

【问题讨论】：

Span 是一个内联元素，所以没有宽度。如果要设置宽度，则需要将其更改为块元素。
输入也是内联元素。并且宽度属性有效。这不应该是答案。
input 不是inline，是inline-block
@AlexanderMamutov 能否请您提供一个链接，据说input 是inline-block 元素，因为据说here 是input 是inline 元素跨度>
输入是一个内联替换元素。诀窍在于替换。内联替换表现为内联块

标签： html css width

【解决方案1】：

这是因为输入具有默认浏览器值，例如写作模式和外观，而跨度元素则没有。

如果你让 css 像 span 一样

span {
  appearance: auto;
  -webkit-writing-mod: horizontal-tb;
  width: 10%;
}

它可以在不改变显示属性的情况下工作。

【讨论】：

【解决方案2】：

Well 仅用于在“内联”模式下更改文本的装饰，即它旨在用作内联元素而不是块元素，因此宽度：100%；（有效地使其成为块元素) 可能不起作用。

While 既用作“内联”元素，也用作“块”元素。因此宽度：100%；有效。

这就是它们的制作方式。

【讨论】：