Cascading Stylesheet Navigationsleiste

I have a navigation bar but the problem is i don't know why dots are coming in my nav bar i tried multiple ways but i didn't find the reason for it i don't want those dots to be appear in my nav bar i have uploaded the image also please CLICKHERE to see it and help me, Thanks in advance. here is my Stylesheet code for my nav bar.Cascading Stylesheet Navigationsleiste

ul{ 
margin:0px; 
padding:100px; 
padding-left:500px; 

} 
ul li a{ 
    text-decoration:none; 
    color:white; 
    display:block; 
} 
ul li{ 
    float:left; 
    width:200px; 
    height:40px; 
    background-color:black; 
    font-size:20px; 
    line-height:40px; 
    text-align:center; 
    border:1px solid aqua; 
} 
ul li a:hover{ 
    background-color:red; 
} 
HTML Code: 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
    <link href="~/Scripts/StyleSheet1.css" rel="stylesheet" /> 
</head> 
<body> 
    <div style="background-color:black; height:50px;"> 
     <h2 style ="color:white; font-size:40px; font-family:'Agency FB';">Look up on ZipCodes</h2> 
    </div> 
    <div> 
     <ul> 
      <li><a href="#">Zipcode by City</a></li> 
      <li><a href="#">City by Zipcode</a></li> 
     </ul> 
    </div> 
</body> 
</html>

Quelle

2017-04-11 sundeep

hilft können Sie auch zeigen, oder fügen Sie Ihre HTML-Code? – Grinex

hinzufügen entfernen müssen list-style-type:none; auf Ihre ul

ul{ 
    margin:0px; 
    padding:100px; 
    padding-left:500px; 
    list-style-type:none; 
}

hinzufügen

Quelle

2017-04-11 15:14:19

Vielen Dank HerrSam, es funktioniert, aber es funktioniert nur in Firefox-Browser Nur, aber in Google Chrome Es macht keine Änderung, aber y? – sundeep

@sundeep Überprüfen Sie meine Antwort, könnte helfen. –

Dies ist, weil es eine Liste ist. Daher erscheinen Aufzählungszeichen neben dem, was innerhalb der li selbst ist.

Um dies zu verhindern, können Sie {list-style-type: none;} hinzufügen, wodurch die Aufzählungszeichen entfernt werden.

ul li { 
list-style-type: none; 
}

Quelle

2017-04-11 15:12:01

zu dem 'ul' Element nicht das 'a' Element –

die ul-Tag hat einen Standardstil für seine Liste, die Kreis ist (Punkte), so dass es list-style-type: none;

ul{ 
    list-style-type: none; 

}

Quelle

2017-04-11 15:14:19 Chiller

setzen Sie einfach list-style: none; auf Ihre ul, um alle Kugel zu entfernen s Liste (Punkte)

Prüfung die Schnipsel-Codes unten, hoffe, es :)

ul { 
 
     margin: 0px; 
 
     padding: 100px; 
 
     padding-left: 500px; 
 
     list-style: none; /* Remove list bullets */ 
 
    } 
 

 
    ul li a { 
 
     text-decoration: none; 
 
     color: white; 
 
     display: block; 
 
    } 
 

 
    ul li { 
 
     float: left; 
 
     width: 200px; 
 
     height: 40px; 
 
     background-color: black; 
 
     font-size: 20px; 
 
     line-height: 40px; 
 
     text-align: center; 
 
     border: 1px solid aqua; 
 
    } 
 

 
    ul li a:hover { 
 
     background-color: red; 
 
    }

<div style="background-color:black; height:50px;"> 
 
    <h2 style="color:white; font-size:40px; font-family:'Agency FB';">Look up on ZipCodes</h2> 
 
</div> 
 
    
 
<div> 
 
    <ul> 
 
     <li><a href="#">Zipcode by City</a></li> 
 
     <li><a href="#">City by Zipcode</a></li> 
 
    </ul> 
 
</div

Quelle

2017-04-11 15:19:57 Grinex

Cascading Stylesheet Navigationsleiste

Antwort

Verwandte Themen