---
title: "Kan inte centera (sträcka ut) menyn"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/182083-kan-inte-centera-sträcka-ut-menyn"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "DanielS"
published: "2010-01-19T22:02:25.000Z"
updated: "2010-01-21T19:17:53.000Z"
replies: 8
views: 1049
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/182083-kan-inte-centera-sträcka-ut-menyn"
---
# Kan inte centera (sträcka ut) menyn
## #1 — DanielS, 2010-01-19T22:02Z
Jag har skapat en meny i css, men den blir liksom align left.
Skulle vilja att texten sträcker ut sig så att den anpassar sig över den 1000px breda bakgrunden, samt centrerad text. Men jag lyckas inte alls med detta. Små detaljer som tar timmar att försöka lösa. :(
Om man pekar på en rad i menyn så ser man en röd linje och den längst till vänster i menyn "Krigsforum.se" där sträcker sig linjen ut till kanten, men inte den längst till höger "Quiz".
Så här ser menykoden ut...
```
ul.menu {
list-style-type:none;
width:1000px;
position:relative;
display:block;
height:33px;
font-size:10px;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:0px solid #000;
margin:0 auto;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0 auto;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 22px 0 25px;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-align:center;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
ul.menu1 {
list-style-type:none;
width:1000px;
position:relative;
display:block;
height:33px;
font-size:.6em;
background: url(http://www.krigsforum.se/forum/images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:0px solid #000;
margin:0;
padding:0;
}
ul.menu1 li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu1 li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 22px 0 25px;
}
ul.menu1 li a:hover,.current {
color:#fff;
background:url(http://www.krigsforum.se/forum/images/bg.png) repeat-x top left;
text-align:center;
}
ul.menu1 .current a {
color:#fff;
font-weight:700;
}
/*RED*/
ul.menu1.red{
background-color:#B11718;
}
ul.menu1.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
```
Permalänk: https://www.webforum.nu/p/182083
## #2 — Danne V, 2010-01-20T05:11Z
Som jag känner till så är just detta en av list-menyernas svagheter. Det lär öht inte gå att få den 100% bred i alla webbläsare och oavsett användarens egna inställningar (fontstorlekar osv). Den enda lösningen är en tabell med en länk i varje cell. Med reservation för att nåt ljushuvud numera har löst problemet alltså...
Permalänk: https://www.webforum.nu/p/2223525
## #3 — jarvklo, 2010-01-20T12:18Z
Hmm..
Visst låter det sig göras med CSS numera!
Det är egentligen "bara" att ta till
```
display: table
```
och dess släktingar (funkar i "allt" - även MSIE8 ;) ) - och alltså bygga det DanneV föreslår - en länk i varje tabellcell, men att göra det med CSS istället för att förvirra till det semantiskt med \-element ;)
Antag följande menykod:
```
```
Med detta upplägg är det "bara" att lägga på grundläggande tabellformattering såhär:
```
#tabs { display: table; border-collapse: collapse; margin: 0 auto; text-align: center;}
#tabs ul {display: table-row; }
#tabs li {display: table-cell; white-space: nowrap; }
```
Efter det behöver man "bara" ta hand om äldre MSIE (dvs versioner innan 8) - vilket ger ett mycket begränsat hack-behov (man hackar ju bara för en - känd - webbläsare med den här flik-metoden, vilket underlättar \*rejält\* i de allra flesta fall ;) ).
Ett sätt att hacka till flikarna för IE7, är att ta till "inline-block"-metoden (IE7 hanterar egentligen inte inline-block, men det finns ett enkelt hack för att gå förbi det):
```
```
\- dvs man lägger dit en extra display: inline i regeln efter display:inline-block så funkiar det som man förväntar sig ( i de tta fall iallafall :) )
Lite mer upp-piffat vill man ju ha det dock, så nästa steg är att stila upp länkarna (och den b-tagg jag använder för den valda fliken bara för att demonstrera).
... och då kan det bli såhär:
Genom att manipulera bredden på #tabs "för alla" och bredden på "#tabs li" för MSIE7 (i CSS:en i den villkorliga kommentaren) bör du kunna komma riktigt nära det du är ute efter - och centrerat dessutom :)
Lycka till :bire
PS
metoden funkar även i MSIE6 - även om det kanske är överkurs numera :birp
Permalänk: https://www.webforum.nu/p/2223573
## #4 — DanielS, 2010-01-20T22:26Z
Jäkligt vänligt av dig att lägga ner all denna tid på att skriva ett så utförligt svar, verkligen. :)
Jag lyckades dock inte med uppgiften. Jag är ganska säker på att det inte beror på att din kod är felaktig. Det är med all sannolikhet jag som inte behärskar läran om kodning tillräckligt. Försökte några varianter, men märkte ingen skillnad alls.
Jag använder för övrigt IE7.
Permalänk: https://www.webforum.nu/p/2223627
## #5 — Danne V, 2010-01-21T07:30Z
> **[jarvklo skrev:](https://www.webforum.nu/p/1495181)**
>
> Hmm..
> Visst låter det sig göras med CSS numera!
Ah! Ser elegant ut. Har inte provat, men har ändå två frågor:
1\. Vad betyder "LT" i "\