Question

我正在学习如何用HTML和CSS编写代码，所以如果我对你过时或奇怪地编码，请不要生我的气。无论如何，我试图创建一个带有侧边栏的简单测试网站，我被困在上面，因为我的项目列表有填充，导致每个项目相互重叠。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--Default Stuff-->
    <meta charset="utf-8">

    <title>Abyss</title>

    <!--Script Links-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/script.js"></script>

    <!--Stylesheet Links-->
    <link rel="stylesheet" text="text/css" href="css/style.css">

    <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

    <!--Font Links-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</body>

CSS：

/* Default Stuff */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
border-bottom:2px solid #111;
width:160px;
padding:10px;
text-decoration:none;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

Answer 1

删除if标记的填充并添加到Console.WriteLine ("Correct!")

尝试使用代码段

＆＃13;

li

＆＃13;

ul li {
  list-style: outside none none;
  padding: 10px;
}

＆＃13;

Answer 2

添加显示：块;要锚定标记，它将采用你给定的填充。

ul li a{display:block;}

以下是相同的代码段

＆＃13;

/* Default Stuff */
body {
	margin:0px;
	padding:0px;
	font-family:"Open Sans", sans-serif;
}

/* Website Sidebar */
#sidebar {
	background:rgb(41,41,41);
	width:180px;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
}

ul {
	margin:0px;
	padding:0px;
}

ul li {
	list-style:none;
}

ul li a {
	background:rgb(41,41,41);
	color:#ccc;
	border-bottom:2px solid #111;
	width:160px;
	padding:10px;
	text-decoration:none;
  display:block;
}

ul li:before {
	content:'\f1ce';
	font-family:'FontAwesome';
}

＆＃13;

<!DOCTYPE html>
		<!--Default Stuff-->
		<title>Abyss</title>

		<!--Script Links-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

		<script src="js/script.js"></script>

		<!--Stylesheet Links-->
		<link rel="stylesheet" text="text/css" href="css/style.css">

		<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

		<!--Font Links-->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	</head>

	<body>
		<!--Website Sidebar-->
		<div id="sidebar">
			<ul>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
			</ul>
		</div>
  </body>
</html>

＆＃13;

Answer 3

将line-height:30px提供给#sidebar

＆＃13;

/* Default Stuff */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}

/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
line-height:30px;
}

ul {
margin:0px;
padding:0px;
}

ul li {
list-style:none;
  padding:15px
}

ul li a {
background:rgb(41,41,41);
color:#ccc;
border-bottom:2px solid #111;
width:160px;
text-decoration:none;
}

ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
}

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/script.js"></script>

    <!--Stylesheet Links-->
    <link rel="stylesheet" text="text/css" href="css/style.css">

    <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

    <!--Font Links-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</body>

＆＃13;

边栏项目列表填充重叠彼此？

3 个答案: