网页制作li横向排列（网页横向显示）

DIV+CSS样式,li自动适应高度,自动换行,横向排列

1、创建两个div，并给它们应用Float：left样式。 在这两个div的外部创建一个父级div。 给这个父级div设置宽度，使其恰好容纳两个子div。 确保父级div的溢出内容会自动换行。这样设置之后，当内容超过两个div的总宽度时，新的div就会自动换到下一行。

2、代码我理过了，写的太想当然了，导致繁杂。你的问题解决方法也很简单，要求换行就直接给换行命令就好了：（ps：要突出种类并换行，直接用换行指令就行了，li里面再套一个ul完全就是自找麻烦，最简单分两p+ul组合都比这样写来的实在。

3、CSS代码：#wrap{white-space：normal； width：200px； }。DIV代码：div ddd1111111111111111111111111111111111/div。可以实现文字自动换行。在Microsoft excel软件单元格中，如果文本过长，则超出列宽以外的文本将被隐藏起来。

4、设置ul一个固定的宽度，如：width：1000px 设置ul横向超出后自动。

5、如果DIV定义的宽度，当文本超过这个宽度时就会自动换行。自动换行：div{ word-wrap： break-word； word-break： normal；} 如果是是连续的数字和英文字符换行，则如下：div强制换行 （IE浏览器）white-space：normal； word-break：break-all；这里前者是遵循标准。

6、答案： 使用CSS的`word-wrap`属性可以实现在内容超出div宽度后自动换行。将该属性设置为`break-word`即可。详细解释： CSS中的word-wrap属性： CSS中的`word-wrap`属性控制如何处理容器中的长单词或者连续书写的文本。这个属性特别有用，当内容中的单词太长以至于无法在当前行的剩余空间中容纳时。

问一下为什么这个html代码不能让列表横排?

在网页设计中，如果你希望列表项（li）水平排列，确实需要对它们应用浮动样式（float：left）。给li元素添加float：left可以使其水平排列，而给div元素添加此样式则不会达到预期效果。

引用样式类。在ul标签内添加，就可以让nav下的li标签引用到设置好的样式类。如图：查看效果。把HTML文件保存后，使用浏览器打开即可看到横向导航菜单效果。如图：a标签既可以当作链接符号来用，本身也是行内标签的一种，直接用a标签输入文字，可以直接在横排显示。

你之所以出现这个问题，原因在于 li{ list-style：none； margin-top：0px； text-align：left； float：left； width：30px； /* 这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大 */ }我把你的代码重新改了一下，可以稍微好一点。

/ul 编辑li标签的css样式 float：left代表的是元素左对齐。这样li标签就可以横排显示了，list-style：none用来去除li标签前面的小圆点。一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。

HTML的li如何横向显示?

利用DreamWeaver新建一个html页面。在body里面输入代码 你好 小鱼 小小 。默认的样式是这样的。编辑li标签的css样式。float：left代表的是元素左对齐。这样li标签就可以横排显示了，list-style：none用来去除li标签前面的小圆点。

添加 display： flex； 即可横向排列。当设置 display：flex时， float：left会失效。看你截图，li应该是已经实现横向排列了，只是宽度不够，导致字体竖向显示了。

li{ list-style：none； margin-top：0px； text-align：left； float：left； width：30px； /* 这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大 */ }我把你的代码重新改了一下，可以稍微好一点。

ulli设置横排,并除去li前的圆点_html/css_web-ITnose

原文 关键的浮动步骤使菜单横向排列，给li元素添加float：left；属性以使每个li浮动在前一个li的左侧，并设置margin-left：10px以确保li之间间隔10像素。CSS定义为：.hvtulli li{float：left；margin-left：10px}。结果如下：菜单变横向了。完成基本布局后，接下来需要优化细节。

在IE8和IE9的兼容模式下，ul内的li元素向左浮动可能会导致文本位置发生变化。可以通过为li元素设置具体的margintop、marginleft等属性来控制间距，以避免布局混乱。例如：#ul7 li{margintop：8px；marginleft：8px；}。

分别设置宽度：由于火狐可能对li元素有最小宽度的限制，可以尝试为li元素显式设置宽度，以确保其在不同浏览器中的显示一致性。例如，可以在CSS中为li元素设置width属性，并调整其值以适应内容显示。使用背景图像：如果li元素中需要显示竖线，可以考虑使用背景图像来替代直接输入竖线符号。

这种方法不可取，因为li是用来显示数据的，我可能需要删除li，若使用table，则删除一个数据后，后面的单元格无法自动向前填充，所以选择用li实现。使用空li会导致增加或删除数据时需要处理多余的或缺少的空li，还需要统计空li数量，操作繁琐。CSS似乎无法解决此问题，只能依赖JS进行判断。

在 div 内加入 ul 和 li，并将 li 设置为向左浮动，此操作在 IE8 和 IE9 浏览器中正常运行，但在使用兼容模式后，所有文本都发生位置变化，如图所示。

确保HTML结构正确：使用正确的嵌套：确保每个li元素都正确地嵌套在ul或ol元素内。避免不恰当的嵌套，如li元素直接嵌套在另一个li元素内而没有ul或ol作为父容器。闭合标签：确保所有的HTML标签都正确闭合，特别是li和ul标签。