列表样式：如何隐藏多余的空白空间

Question

I am having a hard time with removing extra free space while using list-style: none; 在使用list-style: none;时，我很难消除多余的可用空间list-style: none; in my CSS code. 在我的CSS代码中。 It is hard to explain it this way(I am not native english speaker) so here are some screenshots instead. 用这种方式很难解释（我不是英语母语人士），所以这里是一些屏幕截图。

在此处输入图片说明

My problem is that no matter how hard I try, I cannot get rid of the space(red mark) between my border and my navigation bar. 我的问题是，无论我如何努力，都无法摆脱边框和导航栏之间的空白（红色标记）。 My goal is to have the border lined up with the edge of the navigation bar (dark space with links). 我的目标是使边框与导航栏的边缘对齐（带有链接的暗区）。

I hope I made everything clear, i am adding my CSS/HTML/PHP file as well. 我希望我把一切都弄清楚了，我也要添加我的CSS / HTML / PHP文件。

HTML: 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: 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;
}

nav.php: nav.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>

I am not sure if it is an easy fix or not. 我不确定这是否容易解决。 I am new to HTML/CSS/PHP so be patient with me:) Thank you very much for help! 我是HTML / CSS / PHP的新手，请耐心等待：)非常感谢您的帮助！

Answer 1

In your css include: 在您的CSS中包括：

ul {
   padding-left:0px;
}

列表样式：如何隐藏多余的空白空间

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-09-15 21:18:51

列表样式：如何隐藏多余的空白空间

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-09-15 21:18:51

解决方案1
4 已采纳 2013-09-15 21:18:51