HTML：为什么元素占用这么大的宽度？

Question

我一直致力于自定义wordpress主题，这是一个学校项目的一部分，我们应该重新设计一个协会的主页（在我的情况下是剧院组）。

我已经自定义了wordpress菜单，为这四个页面添加了图像。但是，即使我在CSS中使用<nav>，这些图像所在的width: auto元素所占的宽度也超出预期。因此我使用<nav>重新定位了margin-right: -133px;，我觉得这不应该是解决这个问题的方法。

上方横幅的HTML是:(删除了一大堆注释代码）

<header role="banner" id="branding">
    <a href="http://dev.zomis.net/talat/">
        <img alt="" src="http://dev.zomis.net/talat/wp-content/themes/talat/talat-logo.png" id="header_logotype">
    </a>
    <nav role="navigation" id="access">
        <a href="http://dev.zomis.net/talat/forening">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_forening_gray.jpg" id="menu_image_forening" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/scen">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_scen.jpg" id="menu_image_scen" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/film">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_film_gray.jpg" id="menu_image_film" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/natverk">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_natverk_gray.jpg" id="menu_image_natverk" class="menu_image">
        </a>
        <div class="menu-talat-container"><ul class="menu" id="menu-talat"></ul></div>
    </nav>
</header>

为了更轻松地查看问题，我将整个header元素标记为红色，将nav标记为黄色。

我一直在使用Firebug来玩游戏，看看是什么导致了这一点，但我无法弄明白。我一直怀疑<div class="menu-talat-container">中的空<header>是造成这种情况的原因，但我已经多次使用Firebug删除该部分并且没有看到任何区别。

该页面位于：http://dev.zomis.net/talat/scen

它的外观和我不理解的部分的图像标有“为什么这个黄色部分向右伸出？”文字：

当删除margin-right属性时，问题变为“为什么这里没有图像？”：

Answer 1

它发生的原因是图像的宽度设置为15％。总而言之，它们仅占容器宽度的60％。当您添加手动设置的边距时，它仍然会低于100％。所以#access div只是添加了那个空格。

我认为将图像的宽度设置为百分比并不是一个好主意。我建议您编辑图像以适合您希望它们占据的实际空间，然后不在CSS中设置图像的宽度和高度。

Answer 2

为什么当图像太小时，图像会占据整个空间？

只需从margin-right: -133 id='access'删除nav媒体资源，即可更改照片尺寸。 更改#access img上的尺寸比例（目前为15％，但您可以将其设置为22％）。

图像会缩放并变得更高，因此您可能需要调整标题元素的大小或者可能裁剪图像。

您还可以向nav添加一个图像，并在#access img上摆弄左/右边距和填充。