html - 谁能告诉我为什么我的按钮不会调整大小？

Question

无论我将它们设置为我用于按钮的 DIV，都不会调整大小。我正在上传正确的文件，它在服务器上有更改，但无论我刷新多少都没有发生任何事情。我将删除 URL，因此一旦我得到答案，它就不能用作广告。

[删除网址]

Answer 1

这里的问题是您正在尝试调整无法明确控制的内联元素的大小。为了设置元素的高度和宽度，您需要将其显示模式设置为“块”并使用浮动来水平对齐元素。

div .button {
   display: block;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border: 3px double #F1A631;
   background-color: #FCFF68;
   float: left;
   width: 150px;
   height: 30px;
}

此外，您需要按照您希望它们从左到右显示的相反顺序重新排列您的 DIV。CSS2 中有一个名为“inline-block”的显示属性，旨在纠正此问题，但并未得到普遍支持。

Answer 2

在 CSS 中，带有display: inline的元素不能应用宽度或高度。你需要display: inline-block。如果你给它们一个宽度或高度，IE 将错误地将任何内联元素转换为内联块。Fortunatley，自从 Firefox 3 发布以来，您可以使用 inline-block 只需最少的黑客攻击。

没有 Firefox 2 兼容性：

.ib { display: inline-block; zoom: 1; *display: inline; }

示例 HTML

<div class="ib button">My button</div>

Firefox 2 兼容性

.ib{ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
.button { display: block; }

示例 HTML

<div class="ib"><div class="button">My button</div></div>

在您的 .button 实现中，您需要删除 display: inline 部分。