CSS调整<div>大小以适应文本

Question

CSS调整<div>大小以适应文本

13

我有一个名为“container”的<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
}

- JackRoster

1

我认为上传图片按钮坏了，因为它不允许我直接显示我的图片。 - JackRoster

1

我们终于找到问题了，他在使用IE浏览器。 - Alba Mendez

@jmendth，我一开始是在使用Firefox，但我也希望它能在IE上运行。 - JackRoster

8个回答

4

让 .box 成为一个 inline-block 元素...

.box {
  display: inline-block;
}

...并将其居中!

.container {
  text-align: center;
}

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

- Alba Mendez

@JackRoster如果你移除margin: 60px和width: 270px会发生什么？ - Alba Mendez

1

@JackRoster 我看到它已经居中了。看这个：http://jsfiddle.net/Xm32D/1 确保你没有使用IE！（永远不要使用IE :)） - Alba Mendez

IE不再使用专有API了。别忘了是谁发明了innerHTML和字体嵌入 ;) - Niet the Dark Absol

@Kolink 是的，它会。这可能是一个开始：https://twitter.com/chrismatthieu/status/324894166012289024 - Alba Mendez

@Kolink，他们发明了（专有的），而我们发明了一种标准替代品，已经取代了它。请不要轻易相信像微软这样的公司...这对你的健康不利 ;) - Alba Mendez

显示剩余16条评论

2

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

- Melki

1

移除 .box 上的 width，并改为使用 display:inline-block。

- Niet the Dark Absol

好的，我已经做了，但它把文本推向了左边。 - JackRoster

1

将 text-align:center 添加到容器中，而不是 .box。 - Niet the Dark Absol

功能完美，但在IE8上内联块显示不正常。我们该如何使其正常工作？ - JackRoster

是的，它可以。实际上，在IE5.5中它甚至在某种程度上也能工作，但你需要使用<span>标签而不是<div>...但如果你要使用<span>，你甚至不需要使用inline-block。来源 - Niet the Dark Absol

有时候很奇怪，我觉得你把答案发了两次。 - JackRoster

我发布了一个新答案，因为它与这个答案截然不同。 - Niet the Dark Absol

0

这将使容器 div 拉伸到父元素的宽度。

.box {
    width:100%;
}

- Casey Dwayne

0

你可以使用一个技巧，将内部div的颜色设置为与父div相同的背景颜色，使其看起来是透明的，然后将文本放入其中。

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

- Sikander

那么发生的情况是，“白色”空间不再是一个框（为了注意区别，在文本中放置一个<br>）。 - Alba Mendez

0

只需显示:inline，这样可以使盒子适应文本

如果您想将盒子居中，请在外部div中添加'text-align:center'

- Red

0

Flexbox 更新

<!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;
}

- Tolga Ozses

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niet the Dark Absol · Accepted Answer

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

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;
}