DIV+CSS样式，li自动适应高度，自动换行，横向排列
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV+CSS样式，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
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
参考技术A 换行：给li里面的a设成块级元素并给宽度和行高，如果li不包含a就在li上面设。横排：把li浮动起来，一排能横排多少个，取决于你li的宽度和外面ul的宽度 参考技术B 将li的样式设置成以下例子：
display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;
可以修改一下，到适合你的要求。 参考技术C 要看你li里面的内容了，li应该是本身就适应自动高度，给li宽度，里面的文字就会自动换行了，横向排列是想让 li都横向排列，那就写 float：left 参考技术D li float:left; padding:0px 5px; list-style:none; 张家界 凤凰 长沙 衡山 韶山 岳阳楼 周洛 郴州 衡山 桃花源 宁乡 大围山
html div 高度怎么不自动增加？
<div>
<div>
<h2>fsafslf</div>
</div>
</div>
刚打不了中文， 第一div 没设浮动，第二个设了。 h2没设。
背景设在第一div，结果h2里看不到背景
html>
<head>
<style>
#div1
height:auto;
widht:400px;
</style>
</head>
<body>
<div id='div1'>
<p>我只是一个测试的文字</p>
</div>
</body>
</html> 参考技术B <style type="text/css">
.contentbackground:#a5a5a5;height:auto!important; height:500px; min-height:500px;
</style>
<body>
<div class="content">24646146<br/>
24646146<br/>
24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>24646146<br/>
24646146<br/>
</div>
</body>
试着删减就可以看到高度变化
你那是没有结束标签
<h2 style="background-color:#06C;">fsafslf</h2> 参考技术C <div>
<div>
<h2>fsafslf</div>
</div>
<div style="clear:both;"></div>
</div>
在我标注的位置，方上
<div style="clear:both;"></div>
就可以了。你可以试试 参考技术D <div>
<div>
<h2>fsafslf</div>
</div>
</div>
有两种方法，所有div 都不设浮动。
第二种 最下面div 加一个 clear:both 样式会，含有该样式的标签。
还有一种就设置最外层高度，基本不用本回答被提问者采纳 第5个回答 2012-08-03 属性不对
以上是关于DIV+CSS样式，li自动适应高度，自动换行，横向排列的主要内容，如果未能解决你的问题，请参考以下文章
自动换行 css 自适应 宽度不能用固定的，因为必须要适应各类手机，求方法