Question

在学校我们有一个项目，我们将创建一个响应的网站。我们使用系统给你一个元素类，如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>

Answer 1

将[class*="col-"]规则中的填充更改为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>

Answer 2

有很多方法可以关闭填充。所以你说它是一个学校项目。他们给了你所有的CSS。因此，让我们制作一些有用的CSS，以便在需要时使用它们。检查你的HTML导航，你会发现额外的css nopadding。在您的CSS中，前2个是有用的CSS，所以我们在需要时使用它们。任何问题都在评论中问我。

＆＃13;

<!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>

＆＃13;

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/parameters">
    <!-- other stuff ? -->
    <sizes3>
        <xsl:for-each select="parameter[@id=706]/value">
            <xsl:value-of select="@name" /> 
            <xsl:if test="position()!=last()">
                <xsl:text>;</xsl:text>
            </xsl:if>
        </xsl:for-each> 
    </sizes3>
    <!-- more stuff ? -->
</xsl:template>

</xsl:stylesheet>

＆＃13;

Answer 3

在[class*="col-"]更改下的css代码中 padding: 15 px;至padding: 15px 15px 15px 0px;

如何删除导航栏填充

3 个答案: