HTML、CSS中div的宽度错误

dgenwo3n  于 2023-03-14  发布在  其他
关注(0)|答案(1)|浏览(125)

这里的问题是我的导航栏div没有覆盖屏幕的全部100%宽度,因为我改变了背景颜色,我注意到这个问题,width: 100%;也没有帮助。我不知道是什么问题,请帮帮我....我将只分享我的HTML代码,因为CSS在我的代码中不工作,所以只有内联CSS我已经放在PHP脚本和它的正常HTML部分是工作...所以请告诉我是什么问题。小白色区域显示在我的导航栏两边...图片也附上了...

<div class="header-bottom">
    <div class="header-sticky" style="width:100%; height:70px;">
        <div class="container">
            <div class="row align-items-center" style="background-color:#ffe2f8;">

                <!-- Header Logo Start -->
                <div class="col-xl-1 col-6" style="margin-top:-25px;">
                    <div class="header-logo">
                        <a href="index.php"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                    </div>
                </div>
                <!-- Header Logo End -->

                <!-- Header Menu Start -->
                <div class="col-xl-11 d-none d-xl-block" style="margin-top:-21px; font-family: 'Roboto Condensed', sans-serif;">
                    <div class="main-menu position-relative">[![enter image description here](https://i.stack.imgur.com/3kGQd.jpg)](https://i.stack.imgur.com/3kGQd.jpg)
                        <ul>
                            <!-- <li class="has-children"> <li>
                                <a href="#"><span>Home</span> <i class="fa fa-angle-down"></i> </a>
                                <ul class="sub-menu">
                                    <li><a href="index.php">Home 1</a></li>
                                    <li><a href="index-2.php">Home 2</a></li>
                                </ul>
                            </li> -->
                            <li><a href="index.php" style="font-size:13px;margin-right:-20px;"> <span>Home</span></a></li>
                            <?php
                                $query = "select * from categories where status='0'";
                                $data = mysqli_query($link, $query);
                                while($row = mysqli_fetch_array($data))
                                {
                                    extract($row);
                                    echo "<li class='has-children position-static' style='padding-left:-150px;margin-right:-25px;'>";
                                        echo "<a href='sproducts.php?categoryid=$categoryid'  style='font-size:13px;'> <span>".ucfirst($category)."</span><i class='fa fa-angle-down'></i></a>";
                                        echo "<ul class='sub-menu'>";
                                        $query1 = "select * from subcategories s, categories c where c.categoryid = s.categoryid and s.status='0' and s.categoryid = '$categoryid'";
                                        $data1 = mysqli_query($link, $query1);
                                        while($row1 = mysqli_fetch_array($data1))
                                        {
                                            extract($row1);
                                            echo"<li><a href='viewsproducts.php?subcatid=$subcatid'>".strtoupper($subcategory)."</a></li>";
                                        }
                                        echo"</ul>";
                                    echo"</li>";
                                } ?>
                            <!-- <li class="has-children position-static">
                                <a href="#"><span>Shop</span> <i class="fa fa-angle-down"></i></a>
                                <ul class="mega-menu row-cols-4">
                                    <li class="col">
                                        <h4 class="mega-menu-title">Shop Layout</h4>
                                        <ul class="mb-n2">
                                            <li><a href="shop-grid.php">Shop Grid</a></li>
                                            <li><a href="shop-left-sidebar.php">Left Sidebar</a></li>
                                            <li><a href="shop-right-sidebar.php">Right Sidebar</a></li>
                                            <li><a href="shop-list-fullwidth.php">List Fullwidth</a></li>
                                            <li><a href="shop-list-left-sidebar.php">List Left Sidebar</a></li>
                                            <li><a href="shop-list-right-sidebar.php">List Right Sidebar</a></li>
                                        </ul>
                                    </li>
                                    <li class="col">
                                        <h4 class="mega-menu-title">Product Layout</h4>
                                        <ul class="mb-n2">
                                            <li><a href="single-product.php">Single Product</a></li>
                                            <li><a href="single-product-sale.php">Single Product Sale</a></li>
                                            <li><a href="single-product-group.php">Single Product Group</a></li>
                                            <li><a href="single-product-normal.php">Single Product Normal</a></li>
                                            <li><a href="single-product-affiliate.php">Single Product Affiliate</a></li>
                                            <li><a href="single-product-slider.php">Single Product Slider</a></li>
                                        </ul>
                                    </li>
                                    <li class="col">
                                        <h4 class="mega-menu-title">Product Layout</h4>
                                        <ul class="mb-n2">
                                            <li><a href="single-product-gallery-left.php">Gallery Left</a></li>
                                            <li><a href="single-product-gallery-right.php">Gallery Right</a></li>
                                            <li><a href="single-product-tab-style-left.php">Tab Style Left</a></li>
                                            <li><a href="single-product-tab-style-right.php">Tab Style Right</a></li>
                                            <li><a href="single-product-sticky-left.php">Sticky Left</a></li>
                                            <li><a href="single-product-sticky-right.php">Sticky Right</a></li>
                                        </ul>
                                    </li>
                                    <li class="col">
                                        <h4 class="mega-menu-title">Other Pages</h4>
                                        <ul class="mb-n2">
                                            <li><a href="my-account.php">My Account</a></li>
                                            <li><a href="login-register.php">Loging | Register</a></li>
                                            <li><a href="wishlist.php">Wishlist</a></li>
                                            <li><a href="cart.php">Cart</a></li>
                                            <li><a href="checkout.php">Checkout</a></li>
                                            <li><a href="compare.php">Compare</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#"><span>Pages</span> <i class="fa fa-angle-down"></i></a>
                                <ul class="sub-menu">
                                    <li><a href="about.php">About</a></li>
                                    <li><a href="contact.php">Contact</a></li>
                                    <li><a href="faq.php">Faq</a></li>
                                    <li><a href="404-error.php">404 Error</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#"><span>Blog</span> <i class="fa fa-angle-down"></i></a>
                                <ul class="sub-menu">
                                    <li><a href="blog.php">Blog</a></li>
                                    <li><a href="blog-left-sidebar.php">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.php">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.php">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.php">Blog Details Sidebar</a></li>
                                </ul>
                            </li> -->
                            <li><a href="contact.php" style="font-size:13px;"> <span>Contact</span></a></li>
                        </ul>
                    </div>
                </div>
                <!-- Header Menu End -->

                <!-- Header Action Start -->
                <div class="col-xl-2 col-6">
                    
                </div>
                <!-- Header Action End -->

            </div>
        </div>
    </div>
</div>
0yg35tkg

0yg35tkg1#

您没有像下面这样清空默认正文边距:

body {
   margin: 0;
}

顺便说一句,你应该更熟悉开发工具(F12)。

相关问题