0

list-style: none;在我的 CSS 代码中使用时，我很难删除额外的可用空间。很难用这种方式解释（我不是以英语为母语的人），所以这里有一些截图。

在此处输入图像描述

我的问题是，无论我多么努力，我都无法摆脱边框和导航栏之间的空格（红色标记）。我的目标是让边框与导航栏的边缘对齐（带有链接的暗区）。

我希望我把一切都说清楚了，我也在添加我的 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 新手，所以请耐心等待：) 非常感谢您的帮助！

4

1 回答 1

4

在您的 CSS 中包括：

ul {
   padding-left:0px;
}
于 2013-09-15T21:18:51.257 回答