html - Hjælp til menu ul li - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css html

Bruger #17554 @ 10.12.13 16:06

Hey all,

Har brug for hjælp til at ændre min menu fra "ved siden af hinanden" til <li> under hinanden.

Istedet for: Opretbruger - Glemt login
Ønsket:
Opret bruger
Glemt login

Håber i forstår.

HTML kode

 <div id="menu">
 <ul>
 <li><a href="#">Opret bruger</a></li>
 <li><a href="#">Glemt login</a></li>
 </ul>
 </div>

CSS kode

 #menu {
   width: 235px;
   height: auto;
 }
 #menu ul {
     margin: 10px;
     padding: 0px;
     list-style: none;
 }
 #menu  ul li a {
   width: 200px;
   color: #000;
   font-size: 12px;
   background: none;
   border: 1px solid #000;
   padding: 4px;
 }
 #menu ul li {
     padding: 4px;
     margin: 0px;
     display: inline;
 }

Indlæg senest redigeret d. 10.12.2013 16:07 af Bruger #17554

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 12 karma

Sorter efter stemmer Sorter efter dato

Bruger #12476 @ 10.12.13 16:19

110

Du ændrer blot din li's display fra inline til block:

CSS kode

 #menu ul li {
      padding: 4px;
      margin: 0px;
      display: block;
 }

Du bør muligvis finjustere dine paddings og margins derefter.

Indlæg senest redigeret d. 10.12.2013 16:19 af Bruger #12476

Bruger #17081 @ 10.12.13 18:27

1.258

du kan endda fjerne display: block for li elementer er block fra starten af

Indlæg senest redigeret d. 11.12.2013 18:08 af Bruger #17081

Bruger #17554 @ 10.12.13 16:20

Tak, ja det jo det mindste problem.

Men tusind tak.

Bruger #12476 @ 11.12.13 09:40

110

Som Dan rigtigt siger er block standard display for li elementer, hvorfor du formentlig helt kan udelade linien. Grunden til at jeg har medtaget den er, at jeg ikke ved om du har andre styles der modificere dine li-elementer (hvilket man ser fra tid til anden). Har du ikke det, kan linien udelades.

Hjælp til menu ul li

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler