CSS怎么将所有LI的内容排成一行

html-css016

CSS怎么将所有LI的内容排成一行,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>景安网络</title>

<style type="text/css">

li{ display:inline}

</style>

</head>

<body>

<li>11</li>

<li>111</li>

<li>11</li>

</body>

</html>

使用display:inline将li转换为行内元素即可

css设置ul的li 居中均匀排列,我们首先需要做的就是将这个ul的width和height确定,使用margin让ul居中,margin的用法如图:

,然后在设置li的width和height,然后给li一个float,通过代码来理解:

<html>

<head>

<style>

ul{

width:300px

height:30px

border:1px solid #f00

marign:0 auto

}

li{

width:50px

height:30px

float:left

}

</head>

<body>

<ul>

<li>名字1</li>

<li>名字2</li>

<li>名字3</li>

<li>名字4</li>

</ul>

</body>

</html>