css - 设置宽度 div 内的全宽背景图像

Question

希望你能帮助我的查询。我正在一个手动编码的网站中构建一个 WP 博客，并且由于 WP 中的 css 很复杂而遇到问题。这是页面 http://www.carehomesderby.co.uk/news/ 我想跨越菜单导航和页脚浏览器的整个宽度，保持内容居中 我尝试将 ul 宽度设置为 3000px（例如) 但它在 RHS 上增加了大约 30 像素。我无法分离菜单导航，因为它位于 WP 的 header.php 中。在几个地方，同一个元素的样式都被拉出来了，所以我很难确定什么是什么。提前谢谢了

Answer 1

您可以尝试添加：

position:absolute;
left:0px;

在第 1479 行。

并将导航按钮放在导航栏中的新 div 中。例如：

<div class="nav-menu">
        <div class="nav-button">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Facilities</a></li>
            <li><a href="">Respite Care</a></li>
            <li><a href="">Day Care</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Events</a></li>
            <li><a href="">Testimonials</a></li>
            <li><a href="">Contact Us</a></li>

        </ul>
        </div>
        </div>

然后将按钮居中。

Answer 2

我已经看到你的页脚如果你希望它覆盖整个页面然后只需从页脚标签中删除角色

<footer id="colophon" style="width:100%;" role="contentinfo">

只需从角色属性中删除 contentinfo 即可。

只需从角色属性中删除 contentinfo 即可。

对于导航：你需要做几件事，我在这里给你一个想法

1. 删除站点类的最大宽度

   .site { /*max-width: 68.5714rem;*/ }

2. 从 div 标签中删除宽度 950px 的值

   <div id="page" class="hfeed site" style="padding-top:0px; margin-top:0px;">

它会做的是，您的导航和页面将获取整个页面，然后只需将内容设置在您想要的任何位置，而不是导航。