我的導航欄列表上方有不需要的空間

我的列表項上方的空間似乎是子彈曾經的位置，我寧願不使用負邊距來移動我的文本。有沒有辦法擺脫這個空間？我的導航欄列表上方有不需要的空間

繼承人的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/

來源

2014-01-20 Zac.Ledyard

此外，列表樣式在那裏是不正確的，我試圖修復中，我使用列表樣式列表 - 風格：無; –

爲什麼使用
？ –

只需刪除'
'標籤即可解決您的問題。 http://jsfiddle.net/PDKVQ/3/ – Dutchie432

，如果你從你的菜單鏈接刪除<br>和下面的行添加到您的CSS它應該工作。

在第126（NAV UL李一）增加以下內容： line-height: 50px;

希望它能幫助。

來源

2014-01-20 16:22:21 Sam

DEMO

取下<li><a href="index.hmtl"><br>HOME</a></li>的<br>和使用填充代替：

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

來源

2014-01-20 16:23:40

我的導航欄列表上方有不需要的空間

回答

相關問題