display:inline-Problem

[Kuno]

Mein Code:

  
  <ul style="padding:0;margin:0;list-style:none">  
   <li style="display:inline;width:80px">  
  
    <ul style="margin:0;padding:0;list-style:none;width:80px">  
     <li>hm</li>  
    </ul>  
  
   </li>  
  
   <li style="display:inline;width:80px">  
  
    <ul style="margin:0;padding:0;list-style:none;width:80px">  
     <li>hm</li>  
    </ul>  
  
   </li>  
  </ul>  

Nun verstehe ich irgendwie nicht, wieso die beiden "hm" trotz Inline-Block untereinander, statt nebeneinander liegen.

UND NEIN: Ich will keine externe Stylesheet-Datei!!!!!!!! Es geht ums Prinzip, nicht ums CSS-Format

[Jonathan]

<ul style="padding:0;margin:0;list-style:none">
   <li style="display:inline;width:80px">

<ul style="margin:0;padding:0;list-style:none;width:80px">
     <li>hm</li>
    </ul>

</li>

<li style="display:inline;width:80px">

<ul style="margin:0;padding:0;list-style:none;width:80px">
     <li>hm</li>
    </ul>

</li>
  </ul>

>   
> Nun verstehe ich irgendwie nicht, wieso die beiden "hm" trotz Inline-Block untereinander, statt nebeneinander liegen.  
  
inline-block ist was anderes. Aber zur problemlösung. Du musst das display:inline eben nicht nur dem einen li zuweisen, sondern auch dem enthaltenen ul und li. Die sind schließlich standardmäßig auch Blockelemente (bzw. Listenelemente).

[Kuno]

Scheinbar nicht. Der Code zeigt sich durch das hinzufügen im ul unbeeindruckt:

  
  <ul style="padding:0;margin:0;list-style:none">  
   <li style="display:inline;width:80px">  
  
    <ul style="display:inline;margin:0;padding:0;list-style:none;width:80px">  
     <li>hm</li>  
    </ul>  
  
   </li>  
  
   <li style="display:inline;width:80px">  
  
    <ul style="display:inline;margin:0;padding:0;list-style:none;width:80px">  
     <li>hm</li>  
    </ul>  
  
   </li>  
  </ul>  

[Willi]

Hallo,

Scheinbar nicht. Der Code zeigt sich durch das hinzufügen im ul unbeeindruckt: ...

Das Problem liegt daran, dass <li> selbst ein Block-Element ist. Daher muss in das <li>hm</li> ein style mit display:inline rein: <li style="display:inline;">hm</li>
Aber ich würde es lieber anders realisieren, statt display:inline lieber float:left verwenden, so werden auch Links besser mit :hover Eigenschaften ausgestattet. <li style="float: left; display: block;">hm</li>.

Grüße,
Willi