在网页设计中，经常需要对列表元素（`<ul>` 和 `<li>`）进行布局调整，使其适应不同的展示需求。本问题中提到的"将ul+li 分两列显示(横向显示)"，实际上是要将一个单列的列表转换成两列，并且保持列表项水平排列。以下是两种实现这一目标的方法：
方法1：使用DIV+CSS代码
在这个方法中，我们首先创建一个外层的`<div>`，然后通过CSS设置其样式。`div`的宽度(`width`)和浮动属性(`float:left`)用于使`<ul>`元素在容器内左对齐。接着，我们将`<ul>`的宽度设置为略小于`div`的宽度，这样可以避免因为边距或者内边距而产生的溢出。对`<li>`元素设置浮动(`float:left`)和块级元素显示(`display:block`)，以确保它们并排放置。这样，列表项就会自动分为两列，每列的宽度相等。
代码如下：
```html
<style type="text/css">
.mycode {
width: 300px;
height: 74px;
float: left;
}
.mycode ul {
width: 280px;
}
.mycode li {
width: 100px;
float: left;
display: block;
}
</style>
<div class="mycode">
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
</ul>
</div>
```
方法2：直接使用CSS控制
这种方法更为简洁，我们直接对`<ul>`元素应用样式。通过设置`width`使其宽度小于其所有子`<li>`元素宽度之和，然后对`<li>`元素设置浮动(`float:left`)，以实现两列效果。同时，为了清除浮动，可以使用`overflow:hidden`和`zoom:1`组合，或使用`clearfix`类。这里的`padding`用于添加内部间距。
代码如下：
```html
<style type="text/css">
.list {
width: 400px;
overflow: hidden;
zoom: 1;
border: 1px solid #ccc;
}
.list li {
float: left;
width: 190px;
padding: 5px;
}
</style>
<ul class="list">
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
</ul>
```
这两种方法都可以达到将`ul+li`列表分两列横向显示的效果。选择哪种方法取决于项目的需求和已有代码结构。第一种方法可能更适合于已存在`<div>`包裹`<ul>`的情况，而第二种方法则更直接地针对`<ul>`本身进行操作。在实际应用中，还可以根据需要调整宽度、高度、边距等属性，以适应不同屏幕尺寸和视觉效果。
