Dreamweaver新建一个HTML文件——修改title为html+css——新建一个div id为“a”——设置代码，给li设置左浮动效果。
具体步骤：
1、用Dreamweaver新建一个HTML文件
2、修改title为html+css实现横向导航
3、新建一个div id为“a”，添加ul li标签
4、在li中添加自己想要的文字 并调整好文字间距,按F12预览，如下图所示
5、首先去掉字体前面的小黑点，代码如下：
6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果
7、按F12预览，效果如下
横向排列需要在CSS中设定一个浮点，属性名为float 设定为Left 或者 Right这两个有差别 如果是Left 它会往左开始 1 2 3 4 如果是 Right是 往右开始 4 3 2 1
代码可以这么写
ltstyle
.LinkUl { float:left}
lt/style
ltdiv
lth3ltb友情链接lt/blt/h3
ltul id=ul1 class=LinkUl
ltli这是第一列的第一个lt/li
ltli这是第一列的第二个lt/li
ltli这是第一列的第三个lt/li
lt/ul
ltul id=ul2 class=LinkUl
ltli这是第二列的第一个lt/li
ltli这是第二列的第二个lt/li
ltli这是第二列的第三个lt/li
lt/ul
ltul id=ul3 class=LinkUl
ltli这是第三列的第一个lt/li
ltli这是第三列的第二个lt/li
ltli这是第三列的第三个lt/li
lt/ul
lt/div
也可以适用于ltli标签
html中列表向横排列 方法有：
一，这要用到float浮动属性
二，float:left代表想做浮动，也就是横向排列是向左边排列
三，float:right代表想做浮动，也就是横向排列是向右边排列
四，代码如下:
{
<html>
<body>
<style>
ul li{
width:200px
height:20px
float:left//或者用right根据自己需求
}
</style>
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
</body>
</html>
}
根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。
具体步骤如下：／导致这种情况的原因主要是……
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）