Question

我有一个导航栏。有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>

Answer 1

将以下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;
}

使导航栏透明

1 个答案: