Css "width:fit-content;" 属性 效果不佳。 Parent 元素有此 属性 计算其宽度小于其内容
Css "width:fit-content;" property doesn't work well. Parent element has this property calculates its width smaller than its content
我正在做一个克隆项目，我在“width:fit-content”概念上遇到了问题。首先你应该看下面的图片，我会给你相关的 html 和 css 代码和图片。
Parent 元素和孩子
正如您在图片中看到的，紫色是 parent 元素具有 8 像素的填充和“宽度：fit-content”属性。 parent 内部有 span 和 div 元素。橙色的是 span 元素，宽度为 15px。红色的是 div 元素，宽度为 45.984px。粉红色的是跨度，里面包含文本，这些定义了 parents 的宽度。
所有这些意味着 parent 没有填充的内部总宽度是 15px(span) +3px(padding-left) +45.984px(div) = 63.984px。
问题是， 尽管所有这些 parent 的宽度为 48.984px，这导致 div 元素被包裹，我不希望发生这种情况（正如我所说parent 有“宽度：fit-content；”属性）。出现此问题的原因是此紫色 parent 元素的下一个 div 兄弟元素。下一个 div 元素只有 width:100% 属性 并且如果我将宽度 属性 更改为 200px（此宽度值不能超过浏览器视口的宽度）， [=66 的内容=] 元素不换行并且效果很好。问题可以通过下面的代码看到。
Html 文件包含问题
注意：由于字体样式，上面给出的宽度计算与下面的示例代码不同。我在原始代码中使用了特殊字体，但问题仍然出现在下面的示例代码中。
<!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">
<title>Document</title>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
/*header is parent of all elements*/
header {
display: flex;
flex-direction: row;
background-color: gray;
}
/*Parent element which is shown as purple at the example image above*/
/*Problem occurs at this element*/
.parent-div {
padding: 0 8px;
width: fit-content;
background-color: purple;
}
/*Span element inside parent*/
.child-span {
display: inline-block;
background-image: url("/assets/icons/location.png");/*icon image*/
width: 15px;
height: 16px;
margin-top: 22px;
background-color: orange;
}
.child-div {
float: right;
padding-left: 3px;
margin-top: 15px;
background-color: red;
}
.next-sibling-div {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div class="parent-div">
<span class="child-span"></span>
<div class="child-div">
<span>Span1</span>
<span>Span2</span>
</div>
</div>
<div class="next-sibling-div">
</div>
</header>
</body>
</html>
如何显示问题？
将 next-sibling-div 的宽度 属性 更改为小像素宽度或删除具有 next-sibling-div class 的 div 元素。之后，观察 div 元素的变化有 parent-div class.After 那个，你会看到紫色里面的红色 div 将与橙色 span 元素在同一行。
总而言之，我希望紫色 parent 元素内的橙色跨度和红色 div 元素在同一行，但紫色 parent 元素的宽度没有固定大小，因为它的内容将在客户端更改，因此它可能比固定大小长，并且必须与其内容的宽度相同。而且下一个兄弟姐妹必须有 100% 宽度 属性 因为这部分会响应。
我已经创建了这个，但也许它是其他东西而不是你想要的。我也不知道你的图标是什么样子的，以及 spans
中的具体内容
<!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">
<title>Document</title>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
/*header is parent of all elements*/
header {
display: flex;
flex-direction: row;
background-color: gray;
}
/*Parent element which is shown as purple at the example image above*/
/*Problem occurs at this element*/
.parent-div {
padding: 8px;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
}
/*Span element inside parent*/
.child-span {
display: inline-block;
background-image: url("/assets/icons/location.png");/*icon image*/
width: 15px;
height: 16px;
background-color: orange;
}
.child-div {
margin-left: 3px;
background-color: red;
}
.next-sibling-div {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div class="parent-div">
<span class="child-span"></span>
<div class="child-div">
<span>Span1</span>
<span>Span2</span>
</div>
</div>
<div class="next-sibling-div">
</div>
</header>
</body>
问题是您在 child-div 上有 float:left。这导致 spans 显示在一行中，但我不知道为什么。我不在任何地方使用 float，因为 flex-box 对我和我认为对大多数人来说效果更好。因此，如果没有 float:left，每个跨度都有自己的行。现在要并排显示 child-span 和 child-div，只需将 display:flex 添加到 parent-div。要使 child-span 和 child-div 居中，请使用 justify-content:center 和 align-items:center。现在从 childs 中删除 margin-top 并将 padding-left 更改为 child-div 中的 margin-left，因为填充使 space 位于元素内部而不是外部。最后，在 parent-div 上将 padding: 0 8px 更改为 padding: 8px 以使 space 围绕孩子。
另外我忘了你可以从 CSS 中删除 content-fit，因为 parent-div 的宽度基于内部元素。
我正在做一个克隆项目，我在“width:fit-content”概念上遇到了问题。首先你应该看下面的图片，我会给你相关的 html 和 css 代码和图片。
Parent 元素和孩子
所有这些意味着 parent 没有填充的内部总宽度是 15px(span) +3px(padding-left) +45.984px(div) = 63.984px。 问题是， 尽管所有这些 parent 的宽度为 48.984px，这导致 div 元素被包裹，我不希望发生这种情况（正如我所说parent 有“宽度：fit-content；”属性）。出现此问题的原因是此紫色 parent 元素的下一个 div 兄弟元素。下一个 div 元素只有 width:100% 属性 并且如果我将宽度 属性 更改为 200px（此宽度值不能超过浏览器视口的宽度）， [=66 的内容=] 元素不换行并且效果很好。问题可以通过下面的代码看到。
Html 文件包含问题
注意：由于字体样式，上面给出的宽度计算与下面的示例代码不同。我在原始代码中使用了特殊字体，但问题仍然出现在下面的示例代码中。
<!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">
<title>Document</title>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
/*header is parent of all elements*/
header {
display: flex;
flex-direction: row;
background-color: gray;
}
/*Parent element which is shown as purple at the example image above*/
/*Problem occurs at this element*/
.parent-div {
padding: 0 8px;
width: fit-content;
background-color: purple;
}
/*Span element inside parent*/
.child-span {
display: inline-block;
background-image: url("/assets/icons/location.png");/*icon image*/
width: 15px;
height: 16px;
margin-top: 22px;
background-color: orange;
}
.child-div {
float: right;
padding-left: 3px;
margin-top: 15px;
background-color: red;
}
.next-sibling-div {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div class="parent-div">
<span class="child-span"></span>
<div class="child-div">
<span>Span1</span>
<span>Span2</span>
</div>
</div>
<div class="next-sibling-div">
</div>
</header>
</body>
</html>
如何显示问题？
将 next-sibling-div 的宽度 属性 更改为小像素宽度或删除具有 next-sibling-div class 的 div 元素。之后，观察 div 元素的变化有 parent-div class.After 那个，你会看到紫色里面的红色 div 将与橙色 span 元素在同一行。
总而言之，我希望紫色 parent 元素内的橙色跨度和红色 div 元素在同一行，但紫色 parent 元素的宽度没有固定大小，因为它的内容将在客户端更改，因此它可能比固定大小长，并且必须与其内容的宽度相同。而且下一个兄弟姐妹必须有 100% 宽度 属性 因为这部分会响应。
我已经创建了这个，但也许它是其他东西而不是你想要的。我也不知道你的图标是什么样子的，以及 spans
<!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">
<title>Document</title>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
/*header is parent of all elements*/
header {
display: flex;
flex-direction: row;
background-color: gray;
}
/*Parent element which is shown as purple at the example image above*/
/*Problem occurs at this element*/
.parent-div {
padding: 8px;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
}
/*Span element inside parent*/
.child-span {
display: inline-block;
background-image: url("/assets/icons/location.png");/*icon image*/
width: 15px;
height: 16px;
background-color: orange;
}
.child-div {
margin-left: 3px;
background-color: red;
}
.next-sibling-div {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div class="parent-div">
<span class="child-span"></span>
<div class="child-div">
<span>Span1</span>
<span>Span2</span>
</div>
</div>
<div class="next-sibling-div">
</div>
</header>
</body>
问题是您在 child-div 上有 float:left。这导致 spans 显示在一行中，但我不知道为什么。我不在任何地方使用 float，因为 flex-box 对我和我认为对大多数人来说效果更好。因此，如果没有 float:left，每个跨度都有自己的行。现在要并排显示 child-span 和 child-div，只需将 display:flex 添加到 parent-div。要使 child-span 和 child-div 居中，请使用 justify-content:center 和 align-items:center。现在从 childs 中删除 margin-top 并将 padding-left 更改为 child-div 中的 margin-left，因为填充使 space 位于元素内部而不是外部。最后，在 parent-div 上将 padding: 0 8px 更改为 padding: 8px 以使 space 围绕孩子。
另外我忘了你可以从 CSS 中删除 content-fit，因为 parent-div 的宽度基于内部元素。