HTML：为啥元素占用这么多宽度？

Posted 2023-03-06

【中文标题】HTML：为啥元素占用这么多宽度？

【英文标题】：HTML: Why is element taking up so much width?HTML：为什么元素占用这么多宽度？

【发布时间】：2012-05-30 02:14:48

【问题描述】：

我一直在研究一个自定义的 wordpress 主题，这是一个学校项目的一部分，我们应该为一个协会（在我的例子中是一个剧院团体）重新设计一个主页。

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

上方横幅的 html 是：（删除了一大堆注释代码）

<header role="banner" id="branding">
    <a href="http://dev.zomis.net/talat/">
        <img  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 来玩转，看看是什么原因造成的，但我无法弄清楚。我一直怀疑<header> 中的空<div class="menu-talat-container"> 是造成这种情况的原因，但我已经用Firebug 多次删除了该部分并且没有发现任何区别。

页面可见：http://dev.zomis.net/talat/scen

它的外观和我不理解的部分标有“为什么这个黄色部分突出到右边？”的图片：

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

【问题讨论】：

dev.zomis.net/talat/scen 看起来不像你的例子。

@lanzz 我在 chrome 中查看，它看起来也有问题。屏幕截图来自Firefox。无论如何，从使用 text-align: right 开始，然后在 #access 中删除 margin-right 133px。

@lanzz 你用的是什么浏览器？对我来说，它看起来仍然是第一张图片，黄色部分突出。不过我只检查了 Firefox 和 Chrome。

@Gijoey 为此 +1！ （如果它是一个答案，我也会 +1）但是现在空白区域在左侧......我仍然想知道为什么会发生这种情况。

【参考方案1】：

发生这种情况的原因是图像的宽度设置为 15%。它们总共只占容器宽度的 60%。当您添加手动设置的边距时，它仍然低于 100%。所以#access div 只是添加了那个空间。

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

【讨论】：

我认为#access div在设置它的大小时考虑了它的孩子的css修改大小，但显然我完全错了。

【参考方案2】：

为什么图片太小会占据整个空间？

只需从id='access' nav 中删除margin-right: -133 属性并更改照片的大小。 更改 #access img 上的 size 属性（当前为 15%，但您可以将其设置为 22%）。

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

您还可以在nav 上再添加一张图片，并在#access img 上调整左右边距和填充。