有人能告诉我为什么我的按钮不会调整大小？

Question

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

[已删除网址]

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 会错误地将它们转换为内联块。 幸运的是，自从 Firefox 3 发布以来，您只需最少的黑客攻击就可以使用内联块。

不兼容 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 实现中，您需要删除显示：内联部分。