我正在學習 HTML 和 CSS，而且我也是一個新手，只是這么說。我正在制作一個網站，我在頂部制作了一個水平導航欄，其中包含指向網站上其他頁面的鏈接，以及一個圖標。當我在瀏覽器中觀看我的網站并使用檢查器工具檢查元素時，列表元素“li.nav_bar_icon”變為80x82.55，徽標為64像素，通過填充獲得8+8像素，但為什么它是82.55 1另一邊？？？額外的 2.55 像素從何而來？導航欄的代碼如下所示：HTML：<div class="nav_bar"> <ul> <li class="nav_bar_icon"><img class="icon" src="img/icon.png" alt="Icon"></li> <li><a class="nav_bar_button" href="index.html">Home</a></li> <li><a class="nav_bar_button" href="apps.html">Apps</a></li> <li><a class="nav_bar_button" href="images.html">Images</a></li> </ul></div>和CSS：.nav_bar ul { width: 100%; float: left; list-style-type: none; background-color: #00000f;}.nav_bar li { float: left;}.nav_bar_icon { float: left; padding: 8px;}.icon { height: 52px; }.nav_bar_button { display: block; color: #008CFF; text-align: center; padding: 25px 20px; text-decoration: none;}
3 回答
泛舟湖上清波郎朗
TA貢獻1818條經驗 獲得超3個贊
同時設置高度和寬度是一個壞主意，因為它會改變比例。
相反，請嘗試使用 max-height 或 max-width 屬性。
如果使用高度，請將寬度設置為自動，如果使用寬度，請將高度設置為自動。
額外的像素是因為它試圖占據整個可用空間。您可以根據圖像大小使用 max-height 或 max-width 限制它們。
慕容708150
TA貢獻1831條經驗 獲得超4個贊
那是因為您沒有為圖標圖像提供寬度，只提供高度，因此瀏覽器會嘗試調整其大小以使其與給定的高度看起來很好，您只需為圖像添加寬度即可防止這種情況，您說的是64 然后像這樣更改你的代碼：
.icon {
height: 52px;
width: 64px;
}
- 3 回答
- 0 關注
- 194 瀏覽
添加回答
舉報
0/150
提交
取消