# <ul> und float: left;



## The_S (13. Jun 2008)

So, heute ist mein CSS Tag ^^

Ich möchte folgende Darstellung erreichen:


```
*   Anfang         Ende
   *   Anfang2        Ende
```

Praktisch eine zweispaltige Liste. Für die Liste verwende ich den <ul> tag und für den Text ein Label. Damit die zweite Spalte mit dem richtigen Abstand zur ersten Spalte steht, setze ich der ersten Spalte ein width- und ein float-Attribute. Leider ist jetzt die erste Spalte vor dem Listenpunkt. Wenn ich das float weglasse, wird aber kein Abstand eingehalten. Was kann ich da machen? 

Zum Testen:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<body>
<ul>
	[*]<label style="width: 400px; float: left;">Das steht am Anfang</label>Das soll nach hinten
	[*]<label style="width: 400px; float: left;">1</label>2
	[*]<label style="width: 400px;">Das steht am Anfang</label>Das soll nach hinten
	[*]<label style="width: 400px;">1</label>2
[/list]
</body>
</html>
```

Danke


----------



## AlArenal (13. Jun 2008)

Hobbit_Im_Blutrausch hat gesagt.:
			
		

> Leider ist jetzt die erste Spalte vor dem Listenpunkt.



Nur bei Verwendung mikroweicher Browser 

Warum benutzt du keine Tabelle? 
Ach, und eine mehrspaltige Liste ist was anderes: http://www.alistapart.com/articles/multicolumnlists


----------



## The_S (13. Jun 2008)

Weil ich diverse JavaScript Effekte eingebaut habe, die mit einer Tabelle nur schwer realisierbar sind  .

So eine mehrspaltige Liste würde natürlcih auch gehen, zur not kann ich ja bestimmt irgendwie die Aufzählungszeichen ausblenden und stattdessen eigene im Text setzen ...


----------



## Drake (13. Jun 2008)

Hallo,

folgendes funktioniert wie gewünscht:


```
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Titel</title>

    <style type="text/css">
    
    #list li {
        display: block;
        clear: both;
    }
    
    div.listLeft {
        float: left;
        width: 10em;
    }
    
    div.listRight {
    
    }
    
    </style>
</head>
<body>
<ul id="list">
    [*]
        <div class="listLeft">1</div>
        <div class="listRight">text</div>
    
    
    [*]
        <div class="listLeft">2</div>
        <div class="listRight">text</div>
    
    
    [*]
        <div class="listLeft">3</div>
        <div class="listRight">text</div>
    
[/list]
</body>
</html>
```

aus dem doctype kann man natürlich auch transitional machen, hängt davon ab was man wie umsetzen möchte.

Anmerkung am Rande, bitte <label> nicht so missbrauchen.

mfg
Drake


----------



## Gelöschtes Mitglied 6946 (13. Jun 2008)

du könntest, statt float zu verwenden, aus dem element auch einen inline-block machen (display: inline-block. dann erzeugt es keinen zeilenumbruch wie ein "richtiges" block-element, gleichzeitig aber kannst du wie jedem block breite, höhe und solche späße zuordnen.

problem: ff 2 kann das nicht (was mich schon oft genervt hat), aber in diesem fall kannst du dir mit display: -moz-inline-box; behelfen - schreib das einfach über den inline-block befehl. wenn der ff den nicht kennt, nimmt er seinen eigenen kram (der zwar scheiße ist, in deinem fall aber ausreicht). der ie6 kennt inline-block auch nicht, aber dafür hat der generell kein problem damit, wenn inline-elemente ne breitenangabe haben.


```
<style type="text/css">
li span.label {
  display: -moz-inline-box;
  display: inline-block;
  width: 400px;
}
</style>

...

<ul> 
   [*]<span class="label">Das steht am Anfang</span>Das soll nach hinten 
   [*]<span class="label">1</span>2 
   [*]<span class="label">Das steht am Anfang</span>Das soll nach hinten 
   [*]<span class="label">1</span>2 
[/list]
```


----------



## Drake (14. Jun 2008)

Ok, mein Bsp. war ein Schnellschuss, bei näherer Betrachtung funktioniert es nicht wie gewollt, ff lässt die bullets weg und ie7 verschluckt sich daran, der zweite Vorschlag liefert dagegen das gewünschte Ergebniss.

mfg
Drake


----------



## The_S (16. Jun 2008)

läuft, danke


----------

