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

时间:2009-03-06 21:25:14

标签: html resize

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

[删除网址]

2 个答案:

答案 0 :(得分:4)

这里的问题是您正在尝试调整无法显式控制的内联元素。为了设置元素的高度和宽度,您需要将其显示模式设置为“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”的显示属性,用于纠正这个问题,但并不普遍支持。

答案 1 :(得分: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部分。