在我的 CSS 代码中使用 list-style: none; 时，我很难删除多余的可用空间。很难用这种方式解释(我不是以英语为母语的人)所以这里有一些截图。
我的问题是，无论我多么努力，我都无法摆脱边框和导航栏之间的空间(红色标记)。我的目标是让边框与导航栏的边缘对齐(带链接的深色空间)。
我希望我把一切都说清楚了，我正在添加我的 CSS/HTML/PHP 文件。
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>PHP</title>
</head>
<body>
<div id="wrapper">
<?php include('includes/header.php'); ?>
<?php include('includes/nav.php'); ?>
<div id="content">
<h3>Text</h3>
<p>Text...</p>
<p>Text...</p>
<h3>Text</h3>
<p>Text...</p>
<p>Text...</p>
</div>
<?php include('includes/footer.php'); ?>
</div>
</body>
</html>
CSS:
body {
font-family: georgia,sans-serif;
color:white;
background-color: #191919;
}
#wrapper {
width:1200px;
background-color:#363636;
margin:0 auto;
border-left:1px solid #565656;
border-right:1px solid #565656;
}
#header {
width:1200px;
height:200px;
margin:0 auto;
border-bottom:1px solid #565656;
border-top:1px solid #565656;
}
#header h2 {
color: #ffff66;
}
#content {
width:700px;
float:left;
}
#navigation {
padding-top: 55px;
float: right;
width:175px;
height:550px;
list-style:none;
border-left: 1px dotted #ffff66;
}
#navigation a {
display:block;
background:url(images/navbar.JPG );
height:70px;
}
#navigation a.link1:hover {background-position:175px 0px;}
#navigation a.link2 {background-position:0px 70px;}
#navigation a.link2:hover {background-position:175px 70px;}
#navigation a.link3 {background-position:0px 140px;}
#navigation a.link3:hover{background-position: 175px 140px;}
#navigation a.link4 {background-position:0px 210px;}
#navigation a.link4:hover {background-position: 175px 210px;}
#navigation a.link5 {background-position:0px 280px;}
#navigation a.link5:hover {background-position: 175px 280px;}
#navigation a.link6 {background-position:0px 350px;}
#navigation a.link6:hover {background-position: 175px 350px;}
#footer {
clear:both;
width:1200px;
height:35px;
border-top:1px solid #565656;
}
导航.php:
<ul id="navigation">
<li><a href="index.php" class="link1"></a></li>
<li><a href="index.php" class="link2"></a></li>
<li><a href="index.php" class="link3"></a></li>
<li><a href="index.php" class="link4"></a></li>
<li><a href="index.php" class="link5"></a></li>
<li><a href="index.php" class="link6"></a></li>
</ul>
我不确定这是否很容易解决。我是 HTML/CSS/PHP 的新手，所以请耐心等待 :) 非常感谢您的帮助!
最佳答案
在你的CSS中包括:
ul {
padding-left:0px;
}
关于html - 列表样式 : how to hide that extra empty space，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18817588/