檬味博客 » 问答 » DIV+CSS样式，li自动适应高度，自动换行，横向排列

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

AAAA BBBB CCCC DDDD EEEE FFFF 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; /*每个元素的初始化宽度...
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
2019-11-30
将li的样式设置成以下例子：
display:inline;line-height:24px;height:auto;word-break:break-all;word-wrap : break-word ;
可以修改一下，到适合你的要求。2013-04-01
换行：给li里面的a设成块级元素并给宽度和行高，如果li不包含a就在li上面设。
横排：把li浮动起来，一排能横排多少个，取决于你li的宽度和外面ul的宽度2013-03-31
要看你li里面的内容了，li应该是本身就适应自动高度，给li宽度，里面的文字就会自动换行了，横向排列是想让 li都横向排列，那就写 float：left2013-04-01
li{ float:left; padding:0px 5px; list-style:none;} 张家界 凤凰 长沙 衡山 韶山 岳阳楼 周洛 郴州 衡山 桃花源 宁乡 大围山2013-04-01
横向排列 float：left； li的高度设置line-height:??px即可2013-04-01
mengvlog 阅读 11 次 更新于 2025-07-21 12:13:56 我来答关注问题0
6 个回答檬味博客专题活动
  • 宇宙的大象 DIV+CSS样式,li自动适应高度,自动换行,横向排列

    AAAA BBBB CCCC DDDD EEEE FFFF css部分：nav{ margin: 0 auto;border: 2px solid #00CED1;} ul,li { margin: 0px;padding: 0px;list-style: none;} ul{ display: fl...

  • 湖北倍领科技 css中的div如何自动适应浏览器大小

    在CSS中，使div自动适应浏览器大小的方法多种多样。其中一种方法是利用"vh"单位设定div的高度，"vh"代表视窗高度的百分比，1vh即为视窗高度的1%。若要将一个div的高度设置为视窗高度的一半，可以使用如下CSS代码：.div-class{height:50vh;}。此外，设置div的宽度为100%，则该div会随浏览器窗口尺寸...

  • xu_qiaoli DIV+CSS如何实现三列宽度自适应

    那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来。2、css样式写法如下：left,#right {float: left;margin: 0 0 0 -271px;width: 50%;}#main {width: 540px;float: left;background: green;}.inner {padding: 20px;}#left .inner,#right .inner {marg...

  • 猪八戒网 div设置高度自适应?

    html,body{height:100%;margin:0;}/**把HTML和BODY的高度设置成100%**/ div{height:100%;background-color:#ccc;}/**把你DIV的高度设置成100%**/ CSS代码第二种写法 div{height:100%;position:absolute;width:100%;background-color:#ccc;left:0;top:0;} 这里用到position:absolute;所以HT...

  • 海南加宸 如何用CSS实现DIV的高宽自适应浏览器大小

    当这个元素没有CSS样式时，它将只占据页面上的默认大小，无论浏览器窗口大小如何变化，它的大小都不会改变。为了实现自适应效果，我们需要为其添加CSS样式。接下来，我们为这个元素添加如下CSS样式：.myDiv { width: 100%;height: 100%;} 应用上述CSS样式后，元素的宽度和高度将与浏览...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部