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

html-css015

怎么用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也可以

现有样式

不能满足人们的需求.

人们需要:

CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

国外一般不这么叫. <div> 是一个无语义的标签，适合用来做与内容无关的事情.

只能用 <div> 吗？

优化:

省标签，便于控制局部 范例

给通栏加背景色 范例

IE 6 不支持 inline-block :

范例

一列固定宽度，另外一列自适应宽度

浮动元素 + 普通元素margin 范例

如果侧边栏在右边:

注意: 考虑到浏览器的渲染顺序,

aside和main顺序不可更改.

两侧两列固定宽度，中间列自适应宽度

范例

div+css做页面的一行两列布局，首先我们是需要三个div的，第一个div包裹着其他的2个div，然后给那2个div设置float属性和width，height，最好是给个border利于布局的时候方便观察，这里举个例子：

<html>

<head>

<style>

#div1{

width:960px//通过id来控制

height:600px

}

.left{

width:400px

height:400px

border:1px solid #f00

float:left

marign-right:40px //距离第三个div有点距离

}

.right{

width:400px

border:1px solid #f00

height:400px

float:left

}

</style>

</head>

<body>

<div id='div1'>

<div class='left'>我是左边的</div>

<div class='right'>我是右边的</div>

</div>

</body>

</html>