Da li ein Element auf Blockebene ist, belegt es standardmäßig eine Zeile. Um eine horizontale Anordnung zu erreichen, werden im Allgemeinen die folgenden zwei Methoden verwendet:
float:left
Es gibt Ein Problem mit dieser Einstellung ist, dass es vom Textfluss getrennt wird, das heißt, es nimmt keine Position ein. Wenn das übergeordnete Element einen bestimmten Stil hat und keine feste Breite und Höhe hat, wird dies empfohlen dass das übergeordnete Element seinen Float löscht oder eine feste Breite und Höhe festlegt.
display:inline-block
Das heißt, li wird in ein Inline-Element umgewandelt und die Breite, Höhe und Ränder können ebenfalls eingestellt werden. Dies hat auch ein Problem mit Inline-Block It Aus Kompatibilitätsgründen wird empfohlen, danach zwei Attribute hinzuzufügen, d >
*display:inline; *zoom:1;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS + ul li 横向排列的两种方法 </title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
<li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>
</ul>
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine horizontale Anordnung von ul und li in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
