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

<img>各画像のスタイリングに次の CSS を追加します。

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;
}

このようにすると、画像ごとにコードを繰り返す必要がなくなり、1 つの CSS 定義で管理できるため、CSS をより有効に活用できます。

一般的に、次のようなすべての要素に影響する CSS ルールを用意することをお勧めします。

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