例如：

Question

当我创建一个div时，它的宽度接近屏幕的90％，但我希望它的大小应该是最小的。如何使用CSS修复它？有什么想法吗？

Answer 1

如果将div向左或向右浮动，并将其显示为块，则它只是它所需的宽度。

float: left;
display: block;

然后你也可以给它一个宽度。你的“接近90％”的原因是因为默认情况下元素上会有填充/边距。

Answer 2

我们可以看到您的代码吗？如果你想要删除div的块质量，你只需要将display:inline-block添加到该div，它应该占用它所携带的空间。

Answer 3

您可以在display: inline-block上使用<div>，但IE7及更早版本不支持此功能，除了本机内联对象。

Answer 4

任何元素的宽度依赖依赖于的父元素（像素除外）的宽度。可能是您在其每个父元素上设置宽度，最终在子元素的盒子模型上混淆了。如果子元素上没有指定宽度，那么它将继承其父元素的宽度。

例如：

标记代码：

<html> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>

CSS代码：

body { width: 960px; } .outer { width: 75%; } .inner { width: 50%; }

详细信息：

在上面的示例中，您可能会认为<div class="inner">的宽度（50％）将根据<body>的宽度进行调整（这是960px）。

然而，这不会发生，因为我们已经调整了它的父元素：<div class="outer"> （这是75％）。所以真正发生的是<div class="inner">根据<div class="outer">的宽度调整宽度而不是<body>'s。

<div class="inner">的最终宽度计算：

<body> （960px） * <div class="outer"> * （0.75） = <div class="outer">的最终宽度（<强> 720像素）

<div class="outer"> （720px） * <div class="inner"> （0.50） = <div class="inner">的最终宽度（ 360像素）

CSS元素宽度的问题

4 个答案:

例如：

标记代码：

CSS代码：

详细信息：

`<div class="inner">`的最终宽度计算：