我的页面页边距有问题。宽度不起作用

时间：2019-07-04 08:31:29

标签： html css

我正在设计一个主页，但是处理了：

enter image description here

在页脚部分还有类似的内容...

我从来没有发生过：（

在这里您可以找到所有样式表和html文档

/* Style For All Page*/
body{
    margin: 0px;
    padding: 0px;
    direction: rtl;
}
.mainclss{
    background-color: #e2e2e2;
    height: auto;
    width: 100%;
    padding: 0px;
}
.dateclss{
    background-color: #212;
    height: 25px;
    color: bisque;
    padding: 3px 15px;
    font-weight: bold;
    position: relative;
    width: 100%;
}
.logoclss{
    background-color: inherit;
    border-bottom: 2px #f6f6f6 inset;
    margin: auto 0px;
    padding: 20px 20px;
    height: 100px;
    position: relative;
    width: 100%;
}
.logoclss img{
    width: 300px;
}
.navmenueclss ul{
    margin:  0px;
    padding: 0px;
    list-style-type: none;
}
.navmenueclss ul li{
    display: inline-block;
    margin: 3px 15px;
    padding: 0px 2px;
    font-size: large;
}
.navmenueclss ul a{
    text-decoration: none;
    color: #fff5e6;
}
.navmenueclss{
    margin-top: 2px;
    height: 35px;
    background-color: #212121;
    padding: 3px;
    position: relative;
    width: 100%;
}
/*just home page style*/
.branchclss{
    border-top: 3px #f6f6f6 solid;
    padding: 30px;
    position: relative;
    width: 100%;
    text-align: center;
    border-bottom: 3px #f6f6f6 inset;
}
.singlebranchclss{
    padding: 10px;
    height: 300px;
    width: 300px;
    margin: 20px 30px auto;
    display: inline-block;
    border: 2px #e2e2e2 ridge;
}
.singlebranchclss:hover{
    border: 2px #e2e2e2 ridge;
}
.branchclss .singlebranchclss img{
    width: 300px;
    height: 300px;
    margin: 5px auto;
}
.branchclss .singlebranchclss button{
    width: 300px;
    height: 50px;
    background-color: #fafafa;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    margin-top: 20px;
}
.branchclss .singlebranchclss button:hover{
    border: none;
}
.footerclss{
    background-color: #212121;
    width: 100%;
    height: 100px;
}
.footerclss ul{
    margin-top: 50px;
}
.footerclss ul li{
    list-style-type: none;
    display: inline-block;
    margin: 1px 10px;
}
.footerclss ul li a img{
    width: 100px;
    height: 100px;
}
   <!DOCTYPE html>
<html>
<head lang="en">
<style>
/* Style For All Page*/
body{
    margin: 0px;
    padding: 0px;
    direction: rtl;
}
.mainclss{
    background-color: #e2e2e2;
    height: auto;
    width: 100%;
    padding: 0px;
}
.dateclss{
    background-color: #212;
    height: 25px;
    color: bisque;
    padding: 3px 15px;
    font-weight: bold;
    position: relative;
    width: 100%;
}
.logoclss{
    background-color: inherit;
    border-bottom: 2px #f6f6f6 inset;
    margin: auto 0px;
    padding: 20px 20px;
    height: 100px;
    position: relative;
    width: 100%;
}
.logoclss img{
    width: 300px;
}
.navmenueclss ul{
    margin:  0px;
    padding: 0px;
    list-style-type: none;
}
.navmenueclss ul li{
    display: inline-block;
    margin: 3px 15px;
    padding: 0px 2px;
    font-size: large;
}
.navmenueclss ul a{
    text-decoration: none;
    color: #fff5e6;
}
.navmenueclss{
    margin-top: 2px;
    height: 35px;
    background-color: #212121;
    padding: 3px;
    position: relative;
    width: 100%;
}
/*just home page style*/
.branchclss{
    border-top: 3px #f6f6f6 solid;
    padding: 30px;
    position: relative;
    width: 100%;
    text-align: center;
    border-bottom: 3px #f6f6f6 inset;
}
.singlebranchclss{
    padding: 10px;
    height: 300px;
    width: 300px;
    margin: 20px 30px auto;
    display: inline-block;
    border: 2px #e2e2e2 ridge;
}
.singlebranchclss:hover{
    border: 2px #e2e2e2 ridge;
}
.branchclss .singlebranchclss img{
    width: 300px;
    height: 300px;
    margin: 5px auto;
}
.branchclss .singlebranchclss button{
    width: 300px;
    height: 50px;
    background-color: #fafafa;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    margin-top: 20px;
}
.branchclss .singlebranchclss button:hover{
    border: none;
}
.footerclss{
    background-color: #212121;
    width: 100%;
    height: 100px;
}
.footerclss ul{
    margin-top: 50px;
}
.footerclss ul li{
    list-style-type: none;
    display: inline-block;
    margin: 1px 10px;
}
.footerclss ul li a img{
    width: 100px;
    height: 100px;
}

<style/>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="Css/home.css"/>
    <link rel="stylesheet" href="css/all.css"/>
    <link rel="icon" href="img/icon.png"/>
    <title>آریا زی</title>
</head>
<body>
    <div class="mainclss">
        <div class="dateclss">
            date will appear here....
        </div>
        <div class="logoclss">
            <img src="img/navlogo.png" alt="sitelogo">
        </div>
        <div class="navmenueclss">
            <ul>
                <li><a href="#">
                    خانه
                </a></li>
                <li><a href="#">
                    دوخت
                </a></li>
                <li><a href="#">
                    بافت
                </a></li>
                <li><a href="#">
                    چرم
                </a></li>
                <li><a href="#">
                    تماس با ما
                </a></li>
            </ul>
        </div>
        <div class="branchclss">
            <div class="singlebranchclss">
                <img src="img/dooxtport.png" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ورود
                    </button>
                </a>
            </div>

            <div class="singlebranchclss">
                <img src="img/charmport.jpg" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ورود
                    </button>
                </a>
            </div>

            <div class="singlebranchclss">
                <img src="img/baftport.png" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ورود
                    </button>
                </a>
            </div>
            <div class="footerclss">
                <ul>
                    <li><a href="#"><img src="img/insta1.png" alt="insta"/></a> </li>
                    <li><a href="#"><img src="img/twitter1.png" alt="twitter"/></a> </li>
                    <li><a><img src="img/tel1.png" alt="tele"/></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

我想它们会在屏幕外结束并允许水平滚动！

2 个答案:

答案 0 :(得分：0)

有些填充值导致此问题。 在<div>上使用填充值会使它从其位置移动。

尝试将代码更改为

   <!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="Css/home.css"/>
    <link rel="stylesheet" href="css/all.css"/>
    <link rel="icon" href="img/icon.png"/>
    <title>???? ??</title>
</head>
<body>
    <div class="mainclss">
        <div class="dateclss">
            date will appear here....
        </div>
        <div class="logoclss">
            <img src="img/navlogo.png" alt="sitelogo">
        </div>
        <div class="navmenueclss">
            <ul>
                <li><a href="#">
                    ????
                </a></li>
                <li><a href="#">
                    ????
                </a></li>
                <li><a href="#">
                    ????
                </a></li>
                <li><a href="#">
                    ???
                </a></li>
                <li><a href="#">
                    ???? ?? ??
                </a></li>
            </ul>
        </div>
        <div class="branchclss">
            <div class="singlebranchclss">
                <img src="img/dooxtport.png" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ????
                    </button>
                </a>
            </div>

            <div class="singlebranchclss">
                <img src="img/charmport.jpg" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ????
                    </button>
                </a>
            </div>

            <div class="singlebranchclss">
                <img src="img/baftport.png" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ????
                    </button>
                </a>
            </div>
            <div class="footerclss">
                <ul>
                    <li><a href="#"><img src="img/insta1.png" alt="insta"/></a> </li>
                    <li><a href="#"><img src="img/twitter1.png" alt="twitter"/></a> </li>
                    <li><a><img src="img/tel1.png" alt="tele"/></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

<style>
/* Style For All Page*/
body{
    margin: 0px;
    direction: rtl;
}
.mainclss{
    background-color: #e2e2e2;
    height: auto;
    width: 100%;
}
.dateclss{
    background-color: #212;
    height: 25px;
    color: bisque;
    font-weight: bold;
    width: 100%;
}
.logoclss{
    background-color: inherit;
    border-bottom: 2px #f6f6f6 inset;
    margin: auto 0px;
    list-style-type: none;
}
.navmenueclss ul li{
    display: inline-block;
    margin: 3px 15px;
    font-size: large;
}
.navmenueclss ul a{
    text-decoration: none;
    color: #fff5e6;
}
.navmenueclss{
    margin-top: 2px;
    height: 35px;
    background-color: #212121;
    position: relative;
    width: 100%;
}
/*just home page style*/
.branchclss{
    border-top: 3px #f6f6f6 solid;
    position: relative;
    width: 100%;
    text-align: center;
    border-bottom: 3px #f6f6f6 inset;
}
.singlebranchclss{
    height: 300px;
    width: 300px;
    margin: 20px 30px auto;
    display: inline-block;
    border: 2px #e2e2e2 ridge;
}
.singlebranchclss:hover{
    border: 2px #e2e2e2 ridge;
}
.branchclss .singlebranchclss img{
    width: 300px;
    height: 300px;
    margin: 5px auto;
}
.branchclss .singlebranchclss button{
    width: 300px;
    height: 50px;
    background-color: #fafafa;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    margin-top: 20px;
}
.branchclss .singlebranchclss button:hover{
    border: none;
}
.footerclss{
    background-color: #212121;
    width: 100%;
    height: 100px;
}
.footerclss ul{
    margin-top: 50px;
}
.footerclss ul li{
    list-style-type: none;
    display: inline-block;
    margin: 1px 10px;
}
.footerclss ul li a img{
    width: 100px;
    height: 100px;
}

<style/>


   <!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="Css/home.css"/>
    <link rel="stylesheet" href="css/all.css"/>
    <link rel="icon" href="img/icon.png"/>
    <title>???? ??</title>
</head>
<body>
    <div class="mainclss">
        <div class="dateclss">
            date will appear here....
        </div>
        <div class="logoclss">
            <img src="img/navlogo.png" alt="sitelogo">
        </div>
        <div class="navmenueclss">
            <ul>
                <li><a href="#">
                    ????
                </a></li>
                <li><a href="#">
                    ????
                </a></li>
                <li><a href="#">
                    ????
                </a></li>
                <li><a href="#">
                    ???
                </a></li>
                <li><a href="#">
                    ???? ?? ??
                </a></li>
            </ul>
        </div>
        <div class="branchclss">
            <div class="singlebranchclss">
                <img src="img/dooxtport.png" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ????
                    </button>
                </a>
            </div>

            <div class="singlebranchclss">
                <img src="img/charmport.jpg" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ????
                    </button>
                </a>
            </div>

            <div class="singlebranchclss">
                <img src="img/baftport.png" alt="Dookht portal">
                <a href="#">
                    <button about="interanc">
                        ????
                    </button>
                </a>
            </div>
            <div class="footerclss">
                <ul>
                    <li><a href="#"><img src="img/insta1.png" alt="insta"/></a> </li>
                    <li><a href="#"><img src="img/twitter1.png" alt="twitter"/></a> </li>
                    <li><a><img src="img/tel1.png" alt="tele"/></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

<style>
/* Style For All Page*/
body{
    margin: 0px;
    direction: rtl;
}
.mainclss{
    background-color: #e2e2e2;
    height: auto;
    width: 100%;
}
.dateclss{
    background-color: #212;
    height: 25px;
    color: bisque;
    font-weight: bold;
    width: 100%;
}
.logoclss{
    background-color: inherit;
    border-bottom: 2px #f6f6f6 inset;
    margin: auto 0px;
    list-style-type: none;
}
.navmenueclss ul li{
    display: inline-block;
    margin: 3px 15px;
    font-size: large;
}
.navmenueclss ul a{
    text-decoration: none;
    color: #fff5e6;
}
.navmenueclss{
    margin-top: 2px;
    height: 35px;
    background-color: #212121;
    position: relative;
    width: 100%;
}
/*just home page style*/
.branchclss{
    border-top: 3px #f6f6f6 solid;
    position: relative;
    width: 100%;
    text-align: center;
    border-bottom: 3px #f6f6f6 inset;
}
.singlebranchclss{
    height: 300px;
    width: 300px;
    margin: 20px 30px auto;
    display: inline-block;
    border: 2px #e2e2e2 ridge;
}
.singlebranchclss:hover{
    border: 2px #e2e2e2 ridge;
}
.branchclss .singlebranchclss img{
    width: 300px;
    height: 300px;
    margin: 5px auto;
}
.branchclss .singlebranchclss button{
    width: 300px;
    height: 50px;
    background-color: #fafafa;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    margin-top: 20px;
}
.branchclss .singlebranchclss button:hover{
    border: none;
}
.footerclss{
    background-color: #212121;
    width: 100%;
    height: 100px;
}
.footerclss ul{
    margin-top: 50px;
}
.footerclss ul li{
    list-style-type: none;
    display: inline-block;
    margin: 1px 10px;
}
.footerclss ul li a img{
    width: 100px;
    height: 100px;
}

<style/>

答案 1 :(得分：-1)

您只需在CSS部分中仅应用box-size的CSS即可解决此问题。

*,
  *::after,
  *::before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
相关问题
最新问题