CSS ul宽度大于外部宽度 ul中li自动换行,怎么让他不换行

html-css018

CSS ul宽度大于外部宽度 ul中li自动换行,怎么让他不换行,第1张

外层div设个可见区域宽度,同时益处隐藏。

li左浮动,接下来是重点啦!!!!

设置ul宽度,设一个大一些的值,例如5000px,或者用脚本来动态计算赋值也行。这样就能实现你想要的效果。哎,当初刚学时这都不叫事,好久没用了,现在也遇到这个问题了,墨迹了半天才发现原因......

一、使用writing-mode属性语法:writing-mode:lr-tb或writing-mode:tb-rl参数:1、lr-tb:从左向右,从上往下2、tb-rl:从上往下,从右向左运行代码发现,ie显示正常,火狐却不行,所以不建议使用writing-mode属性,下面使用模拟方法实现。 二、模拟文字竖排代码:ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}此方法让li右浮动,设置li宽度和字宽度一样都是14px,这样就自动换行了。另外,“word-wrap:break-wordword-break:nomal”这句实现标点自动换行(连续字符自动换行)。

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