提问人：SourceC 提问时间：9/15/2009 最后编辑：Lukas EderSourceC 更新时间：3/14/2023 访问量：83168
设置内联元素的宽度
Setting the width of inline elements
问：
您可以设置内联元素的宽度，例如 和 ，但在定位它们之前，您不会注意到任何效果。
<span><em><strong>
a） 我以为内联元素的宽度无法设置？
b） 假设宽度可以设置 - 在我们定位内联元素之前，我们不会注意到任何影响（因此我们指定的宽度）。定位方式/位置？
c） 为什么只有当我们“定位”内联元素时，它们的宽度才明显？
答：
20赞
Flavius Stef
9/15/2009
#1
a） 忽略内联元素的宽度
b，c） 当你“定位”一个内联元素时（我假设这意味着使用 position：absolute），你实际上是在使它成为一个块元素，其宽度由浏览器解释
评论
0赞
Fabio Milheiro
2/1/2013
伟大。当我们无法控制 HTML 时，了解这一点非常重要，就像在 Umbraco Contour 生成的表单中一样。谢谢伙计！
2赞
TJ L
9/15/2009
#2
我认为这是因为当您为“内联”元素指定位置属性时，该元素不再以内联方式显示，而是被视为块级元素。
7赞
n1313
9/15/2009
#3
这基本上意味着，如果您应用于内联元素，它将成为块元素并增加宽度。position: absolute
12赞
Donut
9/15/2009
#4
正如其他人所提到的，设置内联元素的宽度（或其他一些与位置相关的属性）将导致浏览器将该元素显示为块元素。
可以使用 CSS 属性显式声明此类行为。最常见的设置是（默认）、和 。
有关该物业的完整参考资料，请点击此处。displaydisplay: inlinedisplay: blockdisplay: nonedisplay
但是，应该注意的是，HTML 4.01 规范不鼓励使用“覆盖 HTML 元素的常规解释”：
样式表提供了以下方法 指定任意渲染 元素，包括元素是否 呈现为块或内联。在 某些情况，例如内联样式 对于列表元素，这可能是 适当，但一般来说， 不鼓励作者 超越传统 HTML 元素的解释 这边。
评论
7赞
Oriol
1/12/2015
"设置内联元素的宽度 [..] 将导致浏览器将该元素显示为块”。是否确定？
30赞
Quentin
8/25/2015
“设置宽度......将导致浏览器将该元素显示为块元素“——这是无稽之谈。您可以设置宽度，但它不会应用于元素。
0赞
Gaurang Patel
3/26/2018
@donut “设置内联元素的宽度（或其他一些与位置相关的属性）将导致浏览器将该元素显示为块元素。
0赞
Reza
4/11/2018
“设置宽度......将导致浏览器将该元素显示为块元素“为 FALSE。正如 @Stef 所说，“当你使用 position：absolute '定位'一个内联元素时，你就把它变成了一个块元素，其宽度由浏览器解释。不能为内联元素设置宽度。
68赞
charliepark
9/15/2009
#5
还有显示选项：内联块，这可能会给你两全其美。
评论
0赞
bobobobo
11/19/2013
虽然有效，但在动态插入元素时仍然有一些非常卡顿/意外的行为。不知道为什么。
0赞
cellepo
10/24/2014
罗伯特·尼曼（Robert Nyman）有一篇关于内联块的精彩博文。
0赞
KTibow
4/17/2022
有时可以更好，就我而言，MDI。inline-flex
0赞
alx lark
2/6/2017
#6
一个。内联元素的宽度将被忽略。
b.实际上，如果设置了宽度，您可以将宽度应用于元素，但要查看结果，您还应该应用。display: inline-block;overflow: hidden;
要获得内联和块类型的所有优点，您可以使用以下代码片段：
display: inline-block;
width: 50%; // or px, em, etc.
overflow: hidden;
text-overflow: ellipsis;
在这种情况下，您可以管理宽度并具有文本省略号功能。
0赞
Kartikeya kotnala
6/28/2017
#7
内联元素不能有宽度。Width 是块元素的一个属性。因此，要在内联元素或具有内联显示类型的元素上使用宽度属性，请将 display 设置为内联块，例如：display：inline-block;
0赞
pok_net
3/14/2023
#8
组合和显示元素对我有用。
如果有人想检查一个工作示例，这里是：inline-flexblock
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>inline demo</title>
<style>
.block_0 {
display: inline-flex;
width: 18rem;
padding: 0.5rem;
background-color: #85C1E9;
}
.block_1 {
display: block;
width: 4rem;
padding: 0.5rem;
background-color: #9B59B6;
}
.block_2 {
display: block;
width: 8rem;
padding: 0.5rem;
background-color: #6495ED;
}
.block_3 {
display: block;
width: 4rem;
padding: 0.5rem;
background-color: #DE3163;
}
</style>
</head>
<body>
<p style="text-align: center;">
<span>some text</span>
<span class="block_0">
<span class="block_1">block_1</span>
<span class="block_2">block_2</span>
<span class="block_3">block_3</span>
</span>
<span>some text</span>
</p>
</body>
</html>上一个：子元素上的边距移动父元素
评论