Question

我的列表项上方的空格似乎是子弹的位置，我宁愿不使用负边距来移动我的文本。有没有办法摆脱这个空间？

继承人HTML：

        <div class="header">
            <div id="pagetitle">
                <p class="title">TEST</p>
            </div>
            <nav>
              <ul>
                <li><a href="index.hmtl"><br>HOME</a></li>
                <li><a href="about.html"><br>ABOUT ME</a></li>
                <li><a href="#"><br>WORK</a>
                    <ul>
                        <li><a href="om.html">ODD MACHINE</a></li>
                        <li><a href="personal.html">PERSONAL</a></li>
                    </ul>
                </li>
                <li><a href="contact.html"><br>CONTACT</a></li>
              </ul>
            </nav>
        </div>

CSS：

html
{
    height: 100%;
}

body
{
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-width: 95%;
    min-width: 800px;
    border-right: solid thick;
    border-left: solid thick;
}

#gradientbg
{
    max-width: 95%;
    background: -moz-linear-gradient(top, rgba(255,136,0,0) 0%, rgba(255,87,21,0) 84%, rgba(255,79,25,0.88) 98%, rgba(255,79,25,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,136,0,0)), color-stop(84%,rgba(255,87,21,0)), color-stop(98%,rgba(255,79,25,0.88)), color-stop(100%,rgba(255,79,25,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,136,0,0) 0%,rgba(255,87,21,0) 84%,rgba(255,79,25,0.88) 98%,rgba(255,79,25,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,136,0,0) 0%,rgba(255,87,21,0) 84%,rgba(255,79,25,0.88) 98%,rgba(255,79,25,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,136,0,0) 0%,rgba(255,87,21,0) 84%,rgba(255,79,25,0.88) 98%,rgba(255,79,25,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,136,0,0) 0%,rgba(255,87,21,0) 84%,rgba(255,79,25,0.88) 98%,rgba(255,79,25,1) 100%); /* W3C */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#pagetitle
{
    height: 150px;
    width: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.title
{
    font-family: Arial, sans-serif;
    font-weight: 100;
    font-size: 50pt;
    padding: 30px 0px 0px 0px;
    margin: 0 auto;
}

/*Nav menu styling*/

nav
{
    width: 90%;
    min-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

nav ul
{
    list-style: circle;
    margin: 0;
    padding: 0;
    position: relative;
}

nav ul:after
{
    content: "";
    clear: both;
    display: block;
}

nav ul ul
{
    display: none;
}

nav ul ul li
{
    float: none;
}

nav ul ul ul
{
    position: absolute;
    left: 100%;
    top:0;
}

nav ul li
{
    width:  25%;
    float: left;
    text-align: center;
    display: inline;
    background: #FF8566;
    margin: 0;
    padding: 0;

}

nav ul li:hover
{
    background: #66FFCC;
}

nav ul li:hover > ul
{
    display: block;
}

nav ul li a
{
    text-decoration: none;
    color: #000000;
    font-family: Arial, sans-serif;
    font-weight: bolder;
    font-size: 16pt;
    display: block;
}

nav ul li a:hover {color: #FF3300;}

小提琴 - http://jsfiddle.net/PDKVQ/

Answer 1

如果您从菜单链接中删除<br>并将以下行添加到您的CSS中，它应该有效。

在规则126（nav ul li a）中添加以下内容： line-height: 50px;

希望它有所帮助。

Answer 2

DEMO

从<br>移除<li><a href="index.hmtl"><br>HOME</a></li>并改为使用填充：

nav ul li a
{
    text-decoration: none;
    color: #000000;
    font-family: Arial, sans-serif;
    font-weight: bolder;
    font-size: 16pt;
    display: block;
    padding: 10px 0;
}

我的导航栏列表上方有不需要的空间

2 个答案: