Gå til innhold

Problemer med display inline

oyvindardal

Anbefalte innlegg

oyvindardal

oyvindardal

Skrevet
Skrevet

Hei jeg holder på med en helt enkel sak her, og vil ha 4 bokser på rad ved siden av hverandre som skal vises inline. Jeg har brukt en UL og vil at hver av de fire LI skal vises INLINE. Men uansett hva jeg prøver på, så kommer boksene under hverandre :S Noen hjelp å få?

 

Kode:

 

 

<html>

<head>

<title>HAFFEN.no</title>

</head>

 

<style type="text/css">

 

div.nav

{

width: 80px;

height: 20px;

background-color: #1485CC;

border: 2px solid #0971B2;

}

 

 

li.inline

{

display: inline;

padding-left: 3px;

padding-right: 7px;

border-right: 1px dotted #066;

}

 

</style>

 

<body>

 

<ul>

<li class="inline"><div class="nav"></div></li>

<li class="inline"><div class="nav"></div></li>

<li class="inline"><div class="nav"></div></li>

<li class="inline"><div class="nav"></div></li>

</ul>

</body>

 

</html>

Videoannonse

Videoannonse
Annonse
PHPdude

PHPdude

Skrevet
Skrevet

Selv om du har satt liste-elementene til inline, så er allikevel <div>'ene innafor block-elementer, det er der problemet ligger.

<div> betegner en ny seksjon av siden, og vises naturlig som et block-element, men det virker ikke som du egentlig lister opp en mengde side-seksjoner. Viss du absolutt trenger en wrapper inni liste-elementene dine bør du heller bruke <span>.

Haraldson

Haraldson

Skrevet
Skrevet

I tillegg vil IE* komme til å trenge float: left; på li-ene og elementene inni li-ene for å vise dette korrekt.

 

Vurder også om du trenger class="inline" på hvert listeelement, eller om du kanskje klarer deg med en ID eller en klasse på ul-en.

PHPdude

PHPdude

Skrevet
Skrevet (endret) 

<ul class="navigation">
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
</ul>

.navigation li {
display:inline; /* Evt. inline-block, men da sier IE stopp */
}

Endret av PHPdude
oyvindardal

oyvindardal

Skrevet
  • Forfatter
Skrevet 
<ul class="navigation">
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
<li>Lenke</li>
</ul>

.navigation li {
display:inline; /* Evt. inline-block, men da sier IE stopp */
}

 

Takk, men hvordan få bokser med bakgrunnsfarge og ramme bak linkene?

oyvindardal

oyvindardal

Skrevet
  • Forfatter
Skrevet

Jeg er veldig nybegynner, skjønner ikke helt hva du mener med a etc :S Kan noen gi meg en forklaring (for DUMMIES) hvordan jeg får til den menyen jeg har bilde av? :)

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...