设置内联元素的宽度

Question

  

您可以设置内嵌元素的宽度，例如<span>，<em>和<strong>，但在定位之前不会发现任何效果。

a）我认为内联元素的宽度不能设置？

b）假设可以设置宽度 - 在我们定位内联元素之前，我们不会注意到任何效果（因此我们指定的宽度）。定位如何/在哪里？

c）为什么内嵌元素的宽度只有在我们“定位”它们时才会显现？

Answer 1

还可以选择 display：inline-block ，它可以为您提供两全其美的效果。

Answer 2

a）忽略内联元素的宽度

b，c）当你“定位”一个内联元素时（我假设这意味着使用 position：absolute ），你实际上是将它作为一个块元素，其宽度由浏览器解释< / p>

Answer 3

正如其他人所提到的，设置内联元素的宽度（或其他一些与位置相关的属性）将导致浏览器将元素显示为块元素。

您可以使用CSS display属性显式声明此类行为。最常见的设置是display: inline（默认），display: block和display: none。
display属性的完整参考资料here。

但是，应该注意的是HTML 4.01 specification不鼓励使用“覆盖HTML元素的传统解释”：

  

样式表提供了手段   指定任意渲染   元素，包括元素   呈现为块或内联。在   某些情况，例如内联样式   对于列表元素，这可能是   适当的，但一般来说，   作者不鼓励   压倒传统的   对HTML元素的解释   这样。

Answer 4

这基本上意味着如果将position: absolute应用于内联元素，它将成为块元素和增益宽度。

Answer 5

我认为这是因为当您为“内联”元素指定位置属性时，该元素不再显示为内联，而是被视为块级元素。

Answer 6

一个。内联元素的宽度将被忽略。

湾实际上，如果设置display: inline-block;，您可以将宽度应用于元素，但要查看结果，您也应该应用overflow: hidden;。

要获得内联和阻止类型的所有好处，您可以使用以下代码段：

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

在这种情况下，您可以管理宽度并具有文本省略号功能。

Answer 7

内联元素不能有宽度。宽度是块元素的属性。因此，要使用宽度超过内联元素的属性或具有显示类型内联集的元素显示为内联块，例如：display：inline-block;