Question

无论我将它们设置为我的DIV，我用于按钮都不会调整大小。我正在上传正确的文件，它在服务器上有更改，但无论我刷新多少都没有发生。我将删除该网址，以便在得到答案后不能将其用作广告。

[删除网址]

Answer 1

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

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 的元素不能应用 width 或 height 。您需要 display：inline-block 。如果给它们宽度或高度，IE将错误地将任何内联元素转换为内联块。 Fortunatley，自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实现中，您需要删除display：inline部分。

有人能告诉我为什么我的<div>按钮不会调整大小吗？</div>

2 个答案: