9

这真让我抓狂。我似乎无法控制div.down_arrow下面元素的高度 -

...
<div id="filters">
    ...
    <span>All</span>
    <div class="down_arrow">
        <img src="images/down_arrow.png" alt=""/>
    </div>
    ...
</div>
...

我有以下CSS -

#filters {
    float: right;
    padding: 24px 10px 0 0;
}

#filters div {
    display: inline;
}

#filters div.down_arrow,
#filters div.down_arrow img {
    height: 12px;
    width: 23px;
}

#filters div.down_arrow:hover ing {
        opacity: 0;
}

safari 开发者工具告诉我，我的高度和宽度div.down_arrow仍然有效（即没有通过属性的线 - 没有其他东西可以覆盖它们）。但是屏幕上的小弹出窗口显示尺寸为div.down_arrow27px x 16px。我可以看到该元素大于img它包含的元素。

我不明白发生了什么 - 看起来高度似乎是从前面的 span 元素中获取的（我不知道是什么影响了宽度）。

4

2 回答 2

14

更改display: inline;为display: inline-block;

问题是您只能手动控制块元素的宽度/高度，而不是内联元素。

于 2013-01-15T11:40:46.297 回答
2

内联元素不受高度影响

于 2013-01-15T11:40:36.440 回答