HTML的li如何横向显示？

html-css0197

HTML的li如何横向显示？,第1张

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

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

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

很多回答都是设置float属性来排列，其实可以从属性之外的方面设置。鉴于li元素是块状元素，所以元素与元素之间才会换行，现在只要把li元素变成元素之间可以同行的内联块状元素就行了。具体代码如下：

li{

display：inline-block；

}

利用Dreamweaver新建一个html页面，

在body里面输入代码

<ul>

<li>xx</li>

<li>xx</li>

<li>xx</li>

</ul>

编辑li标签的css样式

float:left代表的是元素左对齐。这样li标签就可以横排显示了，list-style:none用来去除li标签前面的小圆点。

一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。