0

我有一个导航栏。有 2 个选项卡。他们有 2 个图像而不是文本。但是，这会使图像显示在中心，并在选项卡中显示填充。如何使此选项卡透明，以便仅显示图像？

<div data-role="navbar" data-inset="true" data-filter="true" role="navigation" class="ui-navbar ui-mini" >  
    <img style="max-height:90%; max-width:100%;" src="Header_image.jpg" alt="image"/>
    <ul>
        <li><a href="HolidayList.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%;"  src="holiday_list_btn.png"/></a></li>
        <li><a href="ClosedLocations.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%;"  src="Closed_location_btn.png"/><!--CLOSED LOCATIONS--></a></li>         
    </ul>
</div>
4

1 回答 1

0

将以下 CSS 位添加到<img>每个图像的样式中：

padding: 0px; margin: 0px; display: block;

所以——使用你的例子——它看起来像这样：

<div data-role="navbar" data-inset="true" data-filter="true" role="navigation" class="ui-navbar ui-mini" >  
    <img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;" src="Header_image.jpg" alt="image"/>
    <ul>
        <li><a href="HolidayList.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;"  src="holiday_list_btn.png"/></a></li>
        <li><a href="ClosedLocations.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;"  src="Closed_location_btn.png"/><!--CLOSED LOCATIONS--></a></li>         
    </ul>
</div>

但是为什么不在标题中使用单独的 CSS 或通过外部文件加载呢？

img {
    padding: 0px;
    margin: 0px;
    display: block;
}

这样做会更好地利用 CSS，因为不必为每个图像重复代码并且可以由一个 CSS 定义管理。

一般来说，我建议你有一个影响所有元素的 CSS 规则，如下所示：

* {
    padding: 0px;
    margin: 0px;
}
于 2013-01-29T12:44:17.287 回答