如何删除导航栏填充
[英]How to remove navbar padding
问题描述
在学校，我们有一个项目，我们将创建一个响应迅速的网站。 我们使用的系统是给元素一个类，例如class="col-6 col-m-10" 。 而且我有一个带有一些ul li的导航栏。 但是，它与侧面不一致。 我发现导航栏具有某种填充。
这是一张更好理解的照片：
如何删除填充，使其与顶部的标题和屏幕的左侧对齐？ 这是我的代码：
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; } header { background-color: #ff9900; text-align: center; color: black; font-size: 30px; height: 65px; } nav ul { overflow: hidden; list-style-type: none; text-align: center; } nav ul li a { display: block; padding: 20px 10px; font-size: 20px; text-decoration: none; background-color: #ff9900; color: black; } nav ul li a:hover { background-color: #e68a00; } nav ul li a:active { background-color: #ffa31a; color: white; } .row::after { content: ""; clear: both; display: block; } /* For mobile phones: */ [class*="col-"] { float: left; padding: 15px; width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/mainstil.css"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> </head> <body> <header class="col-12 col-m-12">Personuppgiftlagen</header> <div clas="row"> <nav class="col-4 col-m-6"> <ul> <li><a href="#">Personuppgiftslagen</a></li> <li><a href="#">Lagen om elektronisk kommunikatio</a></li> <li><a href="#">Yttrandefrihetslagen</a></li> <li><a href="#">Tryckfrihetsförordningen</a></li> <li><a href="#">Etik och integritet</a></li> </ul> </nav> <section class="col-8 col-m-6"> <img src="img/pul_s.jpg"> </select> </div> </body> </html>
3 个解决方案
解决方案1
1 2016-10-29 10:06:41
将[class*="col-"]规则上的padding: 15px 0更改为padding: 15px 0
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; } header { background-color: #ff9900; text-align: center; color: black; font-size: 30px; height: 65px; } nav ul { overflow: hidden; list-style-type: none; text-align: center; } nav ul li a { display: block; padding: 20px 10px; font-size: 20px; text-decoration: none; background-color: #ff9900; color: black; } nav ul li a:hover { background-color: #e68a00; } nav ul li a:active { background-color: #ffa31a; color: white; } .row::after { content: ""; clear: both; display: block; } /* For mobile phones: */ [class*="col-"] { float: left; padding: 15px 0; width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/mainstil.css"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> </head> <body> <header class="col-12 col-m-12">Personuppgiftlagen</header> <div clas="row"> <nav class="col-4 col-m-6"> <ul> <li><a href="#">Personuppgiftslagen</a></li> <li><a href="#">Lagen om elektronisk kommunikatio</a></li> <li><a href="#">Yttrandefrihetslagen</a></li> <li><a href="#">Tryckfrihetsförordningen</a></li> <li><a href="#">Etik och integritet</a></li> </ul> </nav> <section class="col-8 col-m-6"> <img src="img/pul_s.jpg"> </select> </div> </body> </html>
解决方案2
0 2016-10-29 10:10:50
有很多方法可以关闭该填充。 所以你说这是一个学校项目。 他们给了你所有的CSS。 因此，让我们制作一些有用的CSS，以便在需要时使用它们。 检查您的HTML导航，您会发现一个额外的CSS nopadding。 在您的CSS中，前2个有用的CSS，因此我们在需要时使用它们。 有任何问题要问我。
/*SOME useful css */ .nopadding{ padding:0 !important;} /*use important because I Overwrite the css in same file.*/ .nomargin{margin:0 !important;}/*use important because I Overwrite the css in same file.*/ /*This is your main CSS*/ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; } header { background-color: #ff9900; text-align: center; color: black; font-size: 30px; height: 65px; } nav ul { overflow: hidden; list-style-type: none; text-align: center; } nav ul li a { display: block; padding: 20px 10px; font-size: 20px; text-decoration: none; background-color: #ff9900; color: black; } nav ul li a:hover { background-color: #e68a00; } nav ul li a:active { background-color: #ffa31a; color: white; } .row::after { content: ""; clear: both; display: block; } /* For mobile phones: */ [class*="col-"] { float: left; padding: 15px; width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/mainstil.css"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> </head> <body> <header class="col-12 col-m-12">Personuppgiftlagen</header> <div clas="row"> <nav class="col-4 col-m-6 nopadding"><!--Here I use our USEFUL CSS nopadding--> <ul> <li><a href="#">Personuppgiftslagen</a></li> <li><a href="#">Lagen om elektronisk kommunikatio</a></li> <li><a href="#">Yttrandefrihetslagen</a></li> <li><a href="#">Tryckfrihetsförordningen</a></li> <li><a href="#">Etik och integritet</a></li> </ul> </nav> <section class="col-8 col-m-6"> <img src="img/pul_s.jpg"> </select> </div> </body> </html>
解决方案3
0 2016-10-29 10:19:56
在[class*="col-"]下的CSS代码中，更改padding: 15 px; padding: 15px 15px 15px 0px;
如何删除 Bootstrap 导航栏上的填充
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.