<style>
ul li{ float:leftmargin-left:20pxlist-style-type:none}
</style>
<ul>
<li>靠左浮动排列一</li>
<li>靠左浮动排列二</li>
<li>靠左浮动排列三</li>
<li>靠左浮动排列四</li>
</ul>
li标签居左浮动，实现ul水平排列；
margin-left:20px左外侧距离20px，list-style-type:none去除无序列表的点；
为dl标签设置浮动即可啊
范例代码如下（在实际开发当中，记得先引入CSS重置文件，此处只给出的是核心功能代码）
<style>.list {
width: 800px
height: 400px
border: 4px solid black
}
.list dl {
float: left
width: 300px
height: 200px
border: 2px solid red
}
</style>
<div class="list">
<dl>
<dt>自定义列表的标题</dt>
<dd>自定义列表的内容</dd>
</dl>
<dl>
<dt>码匠</dt>
<dd>h5course</dd>
</dl>
</div>
做网页布局之前建议先掌握盒模型、浮动等相关知识。可以借助《HTML5布局之路》等书籍进行系统化的学习。
1.需要两个小小的图片，分别用来填充背景与分隔条。
2.编写html代码，用ul、li列表。下面是原代码：（包含效果图）
3.然后开始CSS部分。首先：加背景；其次：将竖直列表变成水平，用float:left就可以实现。相应的CSS代码如下（附效果图）：
4.最后美化一下，给a标签左右2em的间距，同时加上竖线背景（mainNavBorder.jpg）,并弄上:hover时的变化（这里只是让颜色变化） 在上面的CSS基础上，添加如下代码：
