---
title: "Pageing med li, align strul"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/172939-pageing-med-li-align-strul"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "MickeA.com"
published: "2008-07-23T19:20:24.000Z"
updated: "2008-07-24T08:39:13.000Z"
replies: 4
views: 591
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/172939-pageing-med-li-align-strul"
---

# Pageing med li, align strul

## #1 — MickeA.com, 2008-07-23T19:20Z

Hej,

Jag håller på med en form av paging, som ska visas såhär:

```
< 1/3 >
```

Pilarna är bilder i det här fallet, och den *li* som är i mitten, där det står *x/y*, har en bakgrundsbild.

Hur som helst, jag får inte till align på dessa tre li.
Såhär har jag gjort:

```
<ul>
<li class="browse"><a href="#"><img src="images/button/paging.prev.gif" alt="button: previous" /></a></li>
<li class="page_x_of_y">1/3</li>
<li class="browse"><a href="#"><img src="images/button/paging.next.gif" alt="button: next" /></a></li>
</ul>
```

Min CSS:

```
ul {
	margin:				15px 0px 0px 0px;
	list-style-type:		none;
	text-align:			right;
	border:				0px #ff0000 dashed;
}

ul li {
	display:			inline;
	height:				11px;
	border:				0px #000 solid;
}

ul li.page_x_of_y {
	width:				22px;
	padding:			0px 5px 1px 4px;
	font-family:			arial, helvetica, sans-serif;
	font-size:			9px;
	color:				#fff;
	text-align:			center;
	background-image:		url(../images/button/paging.xofy.gif);
	background-repeat:		no-repeat;
}
```

Se min bifogade bild, så ser ni resultatet.

Hur ska jag lösa det här? Någon som kanske har en bättre lösning på mitt problem?

Tack!

Bilagor:

- [_paging.strul.gif](https://www.webforum.nu/a/18678.gif)

Permalänk: https://www.webforum.nu/p/172939

## #2 — Troxy, 2008-07-23T19:30Z

Höjden på varje \<li\> blir inte samma verkar det som.
Jag tror inte det går att sätta *height* på inline-element.
Om du vill ha samma höjd får du använda *inline-block* eller *float*.

Permalänk: https://www.webforum.nu/p/2126980

## #3 — MickeA.com, 2008-07-23T20:44Z

> **Troxy skrev:**
>
> Höjden på varje \<li\> blir inte samma verkar det som.

Precis

> **Troxy skrev:**
>
> Om du vill ha samma höjd får du använda *inline-block* eller *float*.

Float funkar inte, inline-block funkar inte, fler förslag?

Permalänk: https://www.webforum.nu/p/2126992

## #4 — jarvklo, 2008-07-23T23:10Z

Hmm..
Testa att lägga till

```
ul li {
	vertical-align: middle;
}
```

så blir det lite skillnad ;)

... du får kanske i värsta fall meka lite med bakgrundsbildens positionering i .page_x_of_y efter det - den delen har jag inte testat så noga eftersom jag inte har din bild frilagd att testa med - men det löser sig säkert :)

Permalänk: https://www.webforum.nu/p/2127015

## #5 — MickeA.com, 2008-07-24T08:39Z

Jo, det funkar sådär.
Blev rätt i firefox direkt, i IE7 blev det lite snett, men det får lösas i den egna IE7 css'en senare.

Hur det ser ut i IE6 vågar jag inte tänka på just nu, får bli ett senare problem.

Tack ska du ha!

Permalänk: https://www.webforum.nu/p/2127031

---

Tråden på webben: https://www.webforum.nu/amne/html-css/172939-pageing-med-li-align-strul