Question

我有一个名为“容器”的<div>，它包含另一个名为“box”的<div>。 “box”里面有文字。

问题是我无法调整<div class="box">的大小以适应文本。我还有一张图解释我的情况。

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="float.css">
<div class="container">
    <br>
    <br>
    <br>
    <br>
    <div class="box">Hello my name is jack</div>
</div>
<div class="container">
    <br>
    <br>
    <br>
    <br>
    <div class="box">Hello my name is jack</div>
</div>

我的CSS

.container {
    background-color: #ED8713;
    height: 300px;
    width: 300px;
    margin: 60px;
    margin-top: 50px;
}
.box {
    background-color: #FFFFFF;
    width: 270px;
    margin: 0 auto;
    margin-top: 15px;
    text-align: center
}

Answer 1

你知道吗？我们都是白痴。这是真正的答案：

HTML：

<div class="container">
    <br>
    <br>
    <br>
    <br>
    <span class="box">Hello my name is jack</span>
</div>

CSS：

.container {
    background-color: #ED8713;
    height: 300px;
    width: 300px;
    margin: 60px;
    margin-top: 50px;
    text-align: center;
}
.box {
    background-color: #FFFFFF;
    margin-top: 15px;
}

Answer 2

让.box成为inline-block ...

.box {
  display: inline-block;
}

......并以此为中心！

.container {
  text-align: center;
}

将这两个片段添加到样式表并删除width: 270px就足够了。

Answer 3

您应该删除宽度或将其设置为自动：width : auto

Answer 4

删除width上的.box，然后添加display:inline-block。

Answer 5

这会将容器div拉伸到父级的宽度。

.box {
    width:100%;
}

Answer 6

你可以做一个技巧，使内部div颜色不可见，理智的背景颜色为父div，现在将文本放入

<span style="background-color:#ffffff;" >Text </span>

Answer 7

Flexbox 更新

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ED8713;
  height: 300px;
  width: 300px;
  margin: 60px;
  margin-top: 50px;
}
.box {
  background-color: #FFFFFF;
  width: 270px;
  margin: 0 auto;
  margin-top: 15px;
  text-align: center;
}

{{1}}

CSS调整<div>的大小以适合文本</div>

7 个答案: