css当文字换行时高度向上变化

html-css04

css当文字换行时高度向上变化,第1张

css当文字换行时高度向上变化,需要writing-mode和direction配合。css是层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言,该语言中能使用各种代码实现不同的变化,writing-mode和direction配合就会使文字换行时,高度是向上变化,而不是向下变化。

直接给这段文字 加上行高就行了,BR也会应用行高,

比如:

<div style="line-height:30px">

这里的文字行高为30,就算是br也会应用为30

</div>

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