Question

我正在努力使标题更宽，以便它扩展到浏览器大小的两侧。我将所有内容都放在一个设置为990px的包装器div中。我的标题是我想要全宽的部分。我也试图让我的标题有一个固定的位置。但是当我将校正后的位置放入标题的css中时，标题和导航栏会垂直堆叠，并且不会保留我最初设置它们的方式。

<body>
    <div class="wrapper">
        <header class="header">
            <h1>Automotive Industries</h1>
            <ul class="navbar">
                <li id="contact" class="navlist"><a href="http://www.google.com">Contact</a></li>
                <li class="navlist"><a href="http://www.google.com">Services</a></li>
                <li class="navlist"><a href="http://www.google.com">About</a></li>
                <li class="navlist"><a href="http://www.google.com">Home</a></li>
            </ul>
        </header>
        <div class="main">
            <p>Welcome to the #1 stop in automotive today</p>
            <div class="article">
                <img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
            </div>
            <div class="article">
                <img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
            </div>
            <div class="article">
                <img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
            </div>
        </div><!--end of main-->
        <div class="main-two">
            <p id="two-header">Schedule today for a free consultation</p>
            <div class="article">
                <img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
            </div>
            <div class="article">
                <img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
            </div>
            <div class="article">
                <img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
            </div>
        </div><!--end of main-two-->
        <div class="main-three">
            <p id="two-header">Guranteed service for 30 days</p>
            <div class="article">
                <img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
            </div>
            <div class="article">
                <img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
            </div>
            <div class="article">
                <img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
            </div>
        </div><!--end of main-three-->
        <footer class="footer">
            <p class="copyright">Schedule now! Call today at (123)456-7890.</p>
            <p class="copyright-two">Copyright © All Rights Reserved.</p>
            <div class="social-icons">
                <a href="http://www.facebook.com"><img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/></a>
                <a href="http://www.twitter.com"><img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/></a>
                <a href="http://www.instagram.com"><img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/></a>
        </div><!--end of social-icons-->
    </footer>
</div><!--end of wrapper-->

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

body {
    font-size: 62.5%;
    font-family: arial, sans-serif;
    color: black;
    background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
    background-repeat: no-repeat;
    background-position: top, bottom;
}

.wrapper {
    font-size: 1.6em;
    margin: 0 auto;
    width: 990px;
    background-color: white;
    /*padding: 2em;*/
}

header {
    background-color: white;
    height: 50px;
    display: block;
    width: 100%;
}

header h1 {
    float: left;
    padding: 5px;
    color: rgb(95, 207, 128);
    margin-top: 5px;
    margin-left: 100px;
    font-size: 1.8em;
}

.navlist a {
    text-decoration: none;
    color: black;
}

.navlist a:hover {
    color: white;
    background-color: rgb(95, 207, 128);
    padding: 15px;
}

.navlist {
    float: right;
    display: inline-block;
    text-align: center;
    padding: 15px;
    font-size: 1.2em;

}

.main {
    min-height: 20px;
    background-color: rgb(95, 207, 128);
    display: block;
    width: 100%;
}

.main p {
    color: white;
    font-size: 1.6em;
    padding: 50px;
    float: left;
    width: 100%;
}

.article {
    display: inline-block;
    width: 33%;
    padding: 63px;
}

.image {
    min-width: 200px;
    min-height: 200px;
    max-width: 200px;
    max-height: 200px;
}

.main-two {
    background-color: #39ADD1;
    display: block;
}

.main-two p {
    color: white;
    font-size: 1.6em;
    padding: 50px;
    text-align: right;
    width: 100%;
}

.main-three {
    min-height: 20px;
    background-color: #f08c35;
    display: block;
    width: 100%;
}

.main-three p {
    color: white;
    font-size: 1.6em;
    padding: 50px;
    float: left;
    width: 100%;
}

.article {
    display: inline-block;
    width: 33%;
    padding: 63px;
}

.article {
    display: inline-block;
    width: 33%;
    padding: 63px;
}

footer {
    background-color: #294860;
}

.copyright {
    text-align: center;
    padding: 5px;
    color: white;
    font-size: 1.4em;
}

.copyright-two {
    text-align: center;
    padding: 5px;
    color: white;
    font-size: 1.4em;
}

.social-icons {
    display: inline-block;
    padding: 5px;
    margin-left: 40.2%;
    width: 100%;
}

.social-icons a {
    margin-left: 5px;

Answer 1

你的标题需要在包装器之外，因为包装器的宽度是990px。使标题宽度为100％，但它需要位于div结构的根目录或另一个100％宽度元素中。

Answer 2

因为它在你内部<div class="wrapper">这是不可能的，

将它移到包装器上方，它应该可以工作。

<header class="header">
            <h1>Automotive Industries</h1>
            <ul class="navbar">
                <li id="contact" class="navlist"><a href="http://www.google.com">Contact</a></li>
                <li class="navlist"><a href="http://www.google.com">Services</a></li>
                <li class="navlist"><a href="http://www.google.com">About</a></li>
                <li class="navlist"><a href="http://www.google.com">Home</a></li>
            </ul>
        </header>
 <div class="wrapper">

Answer 3

header {
    ...
    width: 100%;
    min-width: 990px;
    position: fixed;
    left: 0;
}

<强> Demo

您正在看到水平滚动，因为网站在一个框架中加载。这不应该发生在一个完整的浏览器窗口中。

我试图在浏览器中以css拉伸全宽度制作标题

3 个答案: