grid.css中的padding-left/right:15px如何去掉

来源：4-4 自由编程

王文辉

2021-01-14 01:26:56

相关截图：

问题描述：导致的原因是grid.css中的padding-left、right：15px，如果直接写padding：0覆盖掉，下面就会出现左右的滚动条，然后用了overflow:hidden解决，感觉好像不太好，这样做可以吗？有没有更好的办法？

相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4-4作业</title>
		<link rel="stylesheet" type="text/css" href="./css/grid.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: 12px;
				box-sizing: border-box;
				color: black;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			img {
				vertical-align: top;
				height: 100%;
			}
			.header,
			.header .container,
			.header .container .row,
			.header .container .row .logo-container,
			.header .container .row .nav-container,
			.header .container .row .btn-container{
				height: 64px;
			}
			.container {
				width: 100%;
				border-bottom: 1px solid #ddd;
				/* padding-left: 0;
				padding-right: 0;
				overflow: hidden; */
			}
			.nav{
				display: flex;
				align-items: center;
				justify-items: flex-start;
				height: 100%;
			}
			.nav>li{
				height: 100%;
				margin-left: 15px;
			}
			.nav>li>a{
				display: flex;
				align-items: center;
				height: 100%;
				font-size: 16px;
				font-weight: 600;
			}
			.nav>li>a:hover{
				color: #1428a0;
			}
			.btn{
				background-color: red;
				height: 64px;
				width: 64px;
				border-top-right-radius: 64px;
				position: absolute;
				border: none;
				z-index: 9;
			}
			.btn-item{
				width: 30px;
				height: 3px;
				border-radius: 3px;
				background-color: white;
				display: block;
				margin-top: 10px;
				margin-left: 6px;
			}
			.btn-item:first-child{
				margin-top: 24px;
			}
			.m-nav-container{
				/* padding-left: 0;
				padding-right: 0; */
				width: 100%;
			}
			.m-nav-container .m-nav{
				height: 0;
				overflow: hidden;
				transition: 0.5s;
				background-color: #DDDDDD;
				color: #444;
			}
			.m-nav-container .m-nav-toggle{
				height: 120px;
			}
			.m-nav-container .m-nav li{
				text-indent: 6px;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				border-bottom: 1px solid #eee;
			}
			.m-nav-container .m-nav li:last-child{
				border: none;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="container">
				<div class="row">
					<div class="btn-container col-6 d-block d-md-none">
						<div type="button" class="btn" id="btn_toggle">
							<span class="btn-item"></span>
							<span class="btn-item"></span>
						</div>
					</div>
					<div class="logo-container col-md-6 col-md-push-6">
						<a href="###"><img src="./img/logo.png" alt=""></a>
					</div>
					<div class="nav-container col-6 col-md-6 col-md-pull-6 d-md-block d-none">
						<ul class="nav">
							<li><a href="#">首页</a></li>
							<li><a href="##">关于</a></li>
							<li><a href="###">商业合作</a></li>
						</ul>
					</div>
				</div>

			</div>
		</div>
		<div class="m-nav-container col-12 d-md-none d-block">
			<ul class="m-nav" id='m_nav_toogle'>
				<li><a href="#">首页</a></li>
				<li><a href="##">关于</a></li>
				<li><a href="###">商业合作</a></li>
			</ul>
		</div>
		<!-- <div id="abc" style="width: 100px;height: 100px;background-color: blue; margin-top: 100px;"> -->

		<!-- </div> -->
		<script type="text/javascript">
			var btn_toggle=document.getElementById('btn_toggle'),
			m_nav_toogle=document.getElementById('m_nav_toogle');
			btn_toggle.onclick=function(){
				if(m_nav_toogle.className==="m-nav"){
					m_nav_toogle.className="m-nav m-nav-toggle";
				}else if(m_nav_toogle.className==="m-nav m-nav-toggle"){
				m_nav_toogle.className="m-nav";
				}
			}
		</script>
	</body>
</html>