将ul+li 分两列显示(横向显示)的方法

目标清晰明了：将一个原本单列显示的 ul>li 列表转变为双列显示。这里有两种方法，让我们通过DIV+CSS代码和直接CSS控制来实现它。

方法一：使用DIV+CSS代码

我们为包含列表的div设置一个宽度和高度，并使其浮动到左侧。接着，我们为列表中的每个项目设置宽度，并使其浮动到左侧，同时以块级元素显示。这样，浏览器会自动将项目分为两列进行显示。让我们看看代码示例：

样式代码如下：

```css

.mycode {

width: 300px; / 设置包含列表的div的宽度 /

height: 74px; / 设置包含列表的div的高度 /

float: left; / 使div浮动到左侧 /

}

.mycode ul {

width: 280px; / 设置列表的宽度 /

}

.mycode li {

width: 100px; / 设置列表项目的宽度 /

float: left; / 使项目浮动到左侧 /

display: block; / 以块级元素显示项目 /

}

```

接下来是HTML结构示例：

```html

```

方法二：直接使用CSS控制实现双列显示。这种方法通过设定合适的宽度和样式，使列表项目自动排列成两列。代码如下：

样式代码如下：

```css

.list {

width: px; / 设置包含列表的元素的宽度 /

overflow: hidden; / 防止溢出 /

zoom: 1; / 用于触发IE下的hasLayout属性 /

border: 1px solid ccc; / 设置边框样式 /

}

.list li {

float: left; / 使项目浮动到左侧以实现双列显示 /

width: 190px; / 设置项目宽度以适应双列显示 /

padding: 5px; / 设置内边距 /

}

```html>接着是HTML结构示例：`

• ABC
• ABC

`li列表就被成功转换为双列显示了。无论是使用DIV+CSS方法还是直接CSS控制方法，都可以实现目标效果。选择哪种方法取决于个人喜好和项目需求。