0
Eine meiner Aufgaben besteht darin, eine responsive Webseite zu erstellen. Ich stoße in Schwierigkeiten, wenn ich versuche, es auf Handys zu öffnen. Meine "li" Elemente berühren und sehen schrecklich aus.Stop li Element Konturen berühren
Wie kann ich die "Box" um jeden li-Artikel berühren?
HTML -
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<body>
<center>
<div id="Menubar">
<ul>
<li id="active"><a href="Index.html">Home</a>
</li>
<li><a href="Information.html">Services</a>
</li>
<li><a href="Contact_us.html">Contact</a>
</li>
</ul>
</div>
</center>
CSS -
#Menubar ul {
padding: .05em 0;
margin: 0;
list-style-type: none;
background-color: #3A3734;
color: #FFF;
width: 100%;
font-family: Oswald;
font-size: 32pt;
font-weight: bold;
text-align: center;
border-top:solid #8E7861 4px;
border-bottom:solid #8E7861 4px;
}
#Menubar ul li { display: inline; }
li a {
text-decoration: none;
margin: 0 0 3px 0;
background-color: white;
color: #6AA0CC;
padding: .1em 1em;
border: 2px solid #6AA0CC;
}
li a:hover {
background-color: #6AA0CC;
color: #fff;
border: 2px solid white;
}
.listcenter{
width:250px;
margin:0 auto;
text-align:left;
}