HTML排版，怎么实现横向放置元素？_随笔

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预览，效果如下

html中列表向横排列方法有：

一，这要用到float浮动属性

二，float:left代表想做浮动，也就是横向排列是向左边排列

三，float:right代表想做浮动，也就是横向排列是向右边排列

四，代码如下:

{

<html>

<body>

<style>

ul li{

width:200px

height:20px

float:left//或者用right根据自己需求

}

</style>

<ul>

</ul>

</body>

</html>

}

根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。

具体步骤如下：／导致这种情况的原因主要是……

添加 float:left即可横向排列。

添加 display: flex即可横向排列。当设置 display:flex时， float:left会失效。

看你截图，li应该是已经实现横向排列了，只是宽度不够，导致字体竖向显示了。给li设置宽度应该就可以了

欢迎分享，转载请注明来源：内存溢出

HTML排版，怎么实现横向放置元素？