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

Question

如题所述

Answer 1

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

Answer 2

换行：给li里面的a设成块级元素并给宽度和行高，如果li不包含a就在li上面设。
横排：把li浮动起来，一排能横排多少个，取决于你li的宽度和外面ul的宽度

Answer 3

将li的样式设置成以下例子：
display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;
可以修改一下，到适合你的要求。本回答被网友采纳

Answer 4

要看你li里面的内容了，li应该是本身就适应自动高度，给li宽度，里面的文字就会自动换行了，横向排列是想让 li都横向排列，那就写 float：left

Answer 5

li{ float:left; padding:0px 5px; list-style:none;} 张家界 凤凰 长沙 衡山 韶山 岳阳楼 周洛 郴州 衡山 桃花源 宁乡 大围山