怎么用css把li分左右两列 按列排列

html-css026

怎么用css把li分左右两列 按列排列,第1张

ul{list-style:nonewidth:200pxoverflow:hidden}

li{width:100pxfloat:left} <ul>

    <li>1</li>

    <li>6</li>

    <li>2</li>

    <li>7</li>

    <li>3</li>

    <li>8</li>

    <li>4</li>

    <li>9</li>

    <li>5</li>

    <li>10</li>

</ul>

要不然用2个ul设为float也可以

<!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转换为行内元素即可

倒序显示并不是把三个li倒过来，而是把里面的内容倒序从数据库读取出来，这个不是你需要考虑的问题，交给后台处理就行。

如果你做静态页面的话也只要把1、2、3的内容直接颠倒过来就行了。