容器的宽度不会根据内部内容自动调整

Question

我有一个div，里面有内容。我给出了width=auto，然后给出了最大宽度，但无论内容的大小如何，容器都会占用一个固定的常量：

.adjustablebox {
background: white;
height: 50px;
width: auto;
overflow: hidden;
padding: 8px;
max-width: 350px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
.body {
background: black;
}

<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>

Answer 1

div是一个块元素。它的默认行为是覆盖整个宽度，所以它这样做，但正如您给定的最大宽度属性，所以它只是扩展到那个极限。为了完成你的任务，你必须将其行为更改为

display: inline-block;

Answer 2

.adjustableboxdiv是块级的，它占用容器的整个可用宽度。

如果你想它是自动宽度，你可以做

.adjustablebox {
display: inline-block;
}

或者使用柔性盒。

Answer 3

不要使用auto，而是使用100%并删除max-width
您还可以删除两个标签

.body {
background: black;
}
.adjustablebox {
background: white;
height: 50px;
width: 100%;
overflow: hidden;
padding: 8px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}

<div class="body"> 
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>

希望这能解决你的问题。