Html 设置内联元素的宽度

Setting the width of inline elements

提问by SourceC

You can set the width of inline elements like <span>, <em>and <strong>, but you won't notice any effect until you position them.

您可以设置内联元素的宽度，例如<span>,<em>和<strong>，但在定位它们之前您不会注意到任何影响。

a) I thought the width of inline an inline element can't be set?

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

b) Assuming width can be set - we won't notice any effects ( thus the width we specify ) until we position inline element. Position how/where?

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

c) Why is the width of inline elements apparent only when we “position” them?

c) 为什么行内元素的宽度只有在我们“定位”它们时才明显？

采纳答案by Donut

As others have mentioned, setting the width (or some other position-related property) of an inline element will cause the browser to then display the element as a block element.

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

You can explicitly declare this sort of behavior through using the CSS displayproperty. The most common settings are display: inline(default), display: block, and display: none.
A full reference for the displayproperty is available here.

您可以通过使用 CSSdisplay属性显式声明此类行为。最常见的设置是display: inline（默认）display: block、 和display: none。此处提供
了该display物业的完整参考。

However, it should be noted that the HTML 4.01 specificationdiscourages the use of "overriding the conventional interpretation of HTML elements":

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

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

样式表提供了指定任意元素呈现的方法，包括元素是呈现为块还是内联。在某些情况下，例如列表元素的内联样式，这可能是合适的，但一般来说，作者不鼓励以这种方式覆盖 HTML 元素的传统解释。

回答by charliepark

There's also the option of display: inline-block, which might give you the best of both worlds.

还有一个选项display: inline-block，这可能会给您带来两全其美的效果。

回答by Flavius Stef

a) The width of an inline element is ignored

a) 忽略内联元素的宽度

b,c) When you "position" an inline element (I assume that means using position:absolute), you are actually making it a block element, whose width is interpreted by the browser

b,c) 当你“定位”一个内联元素（我认为这意味着使用position:absolute）时，你实际上是在使它成为一个块元素，其宽度由浏览器解释

回答by n1313

That basically means that if you apply position: absoluteto inline element, it will become block element and gain width.

这基本上意味着如果您应用position: absolute到内联元素，它将成为块元素并获得宽度。

回答by TJ L

I think it's due to the fact that when you specify position attributes for an "inline" element, the element is no longer being displayed inlineand instead is being treated as a block-level element.

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

回答by alx lark

a. Width of inline elements are ignored.

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

b. Actually you can apply width to element if set display: inline-block;but to see results you also should apply overflow: hidden;.

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

To have all benefits of inline and block types you can use follow snippet:

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

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

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

In this case you can manage width and have text ellipsis feature.

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

回答by Kartikeya kotnala

Inline element cannot have width. Width is a property of block element. So to use property of width over an inline element or an element with display type inline set display as inline-block eg: display:inline-block;

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