12

我有一个<div>叫做“容器”的容器，它包裹着另一个<div>叫做“盒子”的容器。“盒子”里面有文字。

问题是我似乎无法调整大小<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
}
4

7 回答 7

8

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

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;
}
于 2013-04-21T17:38:41.167 回答
4

让... .box_inline-block

.box {
  display: inline-block;
}

...并将其居中！

.container {
  text-align: center;
}

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

于 2013-04-21T17:21:03.597 回答
2

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

于 2013-04-21T17:26:35.923 回答
1

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

于 2013-04-21T17:20:47.690 回答
0

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

.box {
    width:100%;
}
于 2013-04-21T17:20:56.963 回答
0

您可以做一个技巧，使内部 div 颜色不可见，使用健全的背景颜色作为父 div，现在将文本放入

<span style="background-color:#ffffff;" >Text </span>
于 2013-04-21T17:23:01.123 回答
0

弹性盒更新

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

.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;
}
于 2021-07-14T17:35:00.973 回答