个人中心
gpt4 book ai didi

html - 我正在尝试在 css 中制作一个标题，在浏览器中拉伸(stretch)全宽

转载 作者：行者123 更新时间：2023-11-28 07:19:46 24 4
gpt4 key购买 nike

我正在尝试使标题更宽，以便它扩展到浏览器大小的两侧。我将所有内容都放在设置为 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;

最佳答案 

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

Demo

您看到水平滚动是因为网站在框架中加载。在完整的浏览器窗口中不应发生这种情况。

关于html - 我正在尝试在 css 中制作一个标题，在浏览器中拉伸(stretch)全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32145211/

24 4 0
文章推荐： Javascript - 无法在 iframe 的一个 div 中获取元素
文章推荐： c++ - 引用成员函数
文章推荐： css - Genesis 主导航和 Logo
文章推荐： css - 下拉列表中选定值的默认颜色代码是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com