0

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

我已经自定义了 wordpress 菜单以添加四个页面的图像。但是，<nav>这些图像所在的元素占用的宽度比预期的要大，即使我width: auto在 CSS 中使用。正因为如此，我重新定位了<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属性时，问题变为“为什么这里没有图像？”： 为什么标记区域没有图像？

4

2 回答 2

2

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

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

于 2012-05-23T14:14:57.217 回答
1

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

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

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

您还可以在 上再添加一张图像，nav并使用左/右边距和填充#access img。

于 2012-05-23T14:17:40.173 回答