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预览,效果如下
添加 float:left即可横向排列。
添加 display: flex即可横向排列。当设置 display:flex时, float:left会失效。
看你截图,li应该是已经实现横向排列了,只是宽度不够,导致字体竖向显示了。给li设置宽度应该就可以了
很多回答都是设置float属性来排列,其实可以从属性之外的方面设置。鉴于li元素是块状元素,所以元素与元素之间才会换行,现在只要把li元素变成元素之间可以同行的内联块状元素就行了。具体代码如下:li{
display:inline-block;
}