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

我一直在做一个自定义的WordPress主题，这是一个学校项目的一部分，我们应该重新设计一个协会的主页（在我的情况下是一个剧团）。HTML：为什么元素占用这么多宽度？

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

为上旗帜的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玩很多东西，看看是什么造成这个，但我无法弄清楚。我一直怀疑<header>中的空<div class="menu-talat-container">是造成这种情况的原因，但我已经使用Firebug多次删除该部分，并且没有发现任何区别。

页可以在可以看到：http://dev.zomis.net/talat/scen

的它的外观图像和我不明白标有文字部分“这是为什么黄色部分伸出来的吧？”： Why is this yellow part sticking out to the right?

当移除margin-right财产问题就变成了，而不是“为什么没有像在这里吗？”： Why is there no image in the marked area?

来源

2012-05-23 Simon Forsberg

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

@lanzz我看着铬，它看起来也错了。截图来自Firefox。无论如何，首先使用text-align：right并删除#access中的margin-right 133px。 – Gijoey

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

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

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

来源

2012-05-23 14:14:57 vlasits

我以为'#access div'在设置它的大小时考虑到了css修改后的大小，但显然我完全错了。 –

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

只需从id='access'nav中删除margin-right: -133财产并更改照片的大小。在#access img上更改尺码价格（目前为15％，但您可以将其设置为22％）。

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

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

来源

2012-05-23 14:17:40 toniedzwiedz

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

回答

相关问题