Border länge

simi576 · 12. Dezember 2015

Hey
Hab momentan das Problem das ich eine Navigationsleiste machen möchte.
Das ganze ist ja kein Problem jedoch möchte ich die Text-Border alle gleich lang haben.
Die border sollten sich von der länge an an die länge von dem übergeordnetem Conainer als nav2 anpassen.

Hab bis jetzt so :

HTML

<div id="nav2"> 	 <ul> 		 <li><a href="">Startseite</a></li> 		 <li><a href="">bla</a></li> 		 <li><a href="">blabla</a></li> 		 <li><a href="">blablabla</a></li> 		 <li><a href="">blabla</a></li> 		 <li><a href="">Wer sind wir</a></li> 		 <li><a href="">Wie finden sie uns</a></li> 		 <li><a href="">Bio Info</a></li> 	 </ul>  </div>

CSS

a {		text-decoration: none; 	text-align: center;		line-height: 35px;		color: black; 	background-color: #FFDC45;		font-family:Arial;  	font-size:15px;		padding: 3px 3px;
	border-radius:28px;  	border-color: #EEC618;  	border-style: solid;		text-shadow:0 1px 0 #2f6627;		box-shadow:inset 0 34px 0 -15px #EEC618;




}

Bin jetzt seit ca. 3 stunden am rum versuchen aber funktioniert irgenwie nichts.
Hoffe das jemand helfen kann.

Lg Simi576

Ps: Bin neu hier und hab auch nicht wirklich viel erfahrung in Html oder CSS.
Und hab jetzt de Code zweimal neu eingefügt jedoch ändert er sich immer bzw. stappelt es alles auf eine zeile...

MrMurphy · 12. Dezember 2015

Hallo,

meinst du eventuell so:

Code

ul {
   width: 15rem;
   padding: 0;
   margin: 1rem;
   display: flex;
   flex-wrap: wrap;
}
li {
   list-style-type: none;
   display: block;
   width: 100%;
   margin: 0.3rem;
}
a {
   background-color: #FFDC45;
   color: black;
   font-family: Arial;
   font-size: 1.2rem;
   text-decoration: none;
   line-height: 1.2;
   text-shadow: 0 1px 0 #2f6627;
   box-shadow: inset 0 34px 0 -15px #EEC618;
   display: block;
   padding: 0.3rem 0.5rem;
   border-color: #EEC618;
   border-style: solid;
   border-radius: 0.8rem;
}

Alles anzeigen

Gruss

MrMurphy

simi576 · 12. Dezember 2015

Genau das habe ich gesucht
Dachte nicht das es so einfach ist

Border länge

Jetzt mitmachen!

Teilen