HTML部分：
<div id="nav">
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFF</li>
</ul>
</div>
css部分：
#nav{
margin: 0 auto;
border: 2px solid #00CED1;
}
ul,li {
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li{
border: 1px solid;
width: 100px; /*每个元素的初始化宽度*/
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
flex:auto; /*这是关键*/
}
扩展资料：
Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
横排：把li浮动起来，一排能横排多少个，取决于你li的宽度和外面ul的宽度
display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;
可以修改一下，到适合你的要求。本回答被网友采纳
DIV+CSS样式,li自动适应高度,自动换行,横向排列
<div id="nav"> <ul> <li>AAAA<\/li> <li>BBBB<\/li> <li>CCCC<\/li> <li>DDDD<\/li> <li>EEEE<\/li> <li>FFFF<\/li> <\/ul> <\/div> css部分：nav{ margin: 0 auto;border: 2px solid #00CED1;} ul,li { margin: 0px;padding: 0px;list-style: none;} ul{ display: fl...
div+css 文字列表横向排列,自动换行。css里如何控制?
<style> .xiangmu>ul>li { float:left;} <\/style>
...如何使它宽度超过ul以后依然不自动换行,成横排显示?
设置ul横向超出后自动。overflow-x：auto 设置ul竖向超出隐藏 有足够多的li，li的width设置为100px ，li的数量最少为11个 因为li数量多，导致ul会出现横向滚动条，这样就实现了想要的效果
div+css中怎么换行,是用ul li吗
ul li是项目列表，并不是换行，在div与css布局的时候，一般用div划分区域，当然也可以换行了，要是在内部div中也可以用《br》或者css样式换行。
CSS + DIV 怎么让图片横向排列自动换行
CSS + DIV 怎么让图片横向排列自动换行 100 写了一段代码,输出图片,结果图片是出来了,可它是上下排列的,而且不会自动换行,,我想让它水平排列,当空间不够还会自动换行,该怎么修改??functionshow_img(){varimg_char;var... 写了一段代码,输出图片,结果图片是出来了,可它是上下排列的,而且不会自动换行,,...
div+css 如何横向排列,要求横向排两个。超过两个就自动换行!
没必要写那么多的，直接A就搞定了。代码总发布上去，你百度HI我，我给你发你看看是不是你要的效果
用DIV+CSS中如何设置,超出就自动换行输出。
如果DIV定义的宽度，当文本超过这个宽度时就会自动换行。自动换行：div{ word-wrap: break-word; word-break: normal;} 如果是是连续的数字和英文字符换行，则如下：div强制换行 （IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。wrap{white-space:normal; width:200px; } ...
用DIV+CSS中如何设置成超出就自动换行输出?
\\x0d\\x0a\\x0d\\x0a对于div,p等块级元素：\\x0d\\x0a正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行\\x0d\\x0ahtml\\x0d\\x0a正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义\\x0d\\x0acss\\x0d\\x0a#wrap{...
div+css中怎样实现文字自动换行?
div+css中实现文字自动换行代码如下：1、CSS代码：#wrap{white-space:normal; width:200px; }。2、DIV代码：<div >ddd1111111111111111111111111111111111<\/div>。可以实现文字自动换行。在Microsoft Excel软件单元格中，如果文本过长，则超出列宽以外的文本将被隐藏起来。为了在保持列宽一定的情况下显示出单元...
用了flex布局,自动换行,三行三列但有10个li,多出一个想放在第一排最后...
HTML部分：<div id="nav"> <ul> <li>AAAA<\/li> <li>BBBB<\/li> <li>CCCC<\/li> <li>DDDD<\/li> <li>EEEE<\/li> <li>FFFF<\/li> <\/ul> <\/div> css部分：nav{ margin: 0 auto;border: 2px solid #00CED1;} ul,li {非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！
