设置 li自适应宽度

原文:http://hi.baidu.com/yingjianglinx/item/c2d868fc49a6b15bc9f337e4

1、设置float属性的li里的链接也为float属性//这个属性也没用到

2、设置li的高度,设置overflow:hidden属性。//我这里是IE8,没有用到这一条

3、设置li属性white-space:nowrap;//文本不换行用到了,解释在下面

设置好这几个属性即可实现li在IE6下自适应宽度。

<ul style="width:200px "><li style="height:26px;white-space:nowrap; ">
		<a href="#" class="tit">进销存、财务、库存</a>
		<ul>
		<li><a href="#">智方3000+商业进销存系列</a><i>(1001)</i></li>
		<li><a href="#">5,000+ Photos!</a><i>(1001)</i></li>
		<li><a href="#">Local Vendors </a><i>(1001)</i></li>
		<li><a href="#">Budget Weddings</a><i>(1001)</i></li>
		<li><a href="#">Wedding Flowers </a><i>(1001)</i></li>
		</ul>
</li></ul>

效果:

但是如果li文字太多,就会超出ul边框,如:


所以ul不要设置固定的宽度,完全让li自适应宽度

参考:http://www.w3school.com.cn/css/pr_text_white-space.asp

定义和用法
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
默认值:	normal
继承性:	yes
版本:	CSS1
JavaScript 语法:	object.style.whiteSpace="pre"
实例
规定段落中的文本不进行换行:
p
  {
  white-space: nowrap
  }
TIY
浏览器支持
所有浏览器都支持 white-space 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列,但是正常地进行换行。
pre-line	合并空白符序列,但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现html二级菜单的自动宽度可以使用CSS的flex布局和百分比宽度。 首先,将菜单项放在一个父元素中,使用display:flex来设置flex布局。然后,将菜单项的宽度设置为百分比,这样就可以根据父元素的宽度自动调整菜单项的宽度了。 例如: HTML代码: ``` <div class="menu"> <ul> <li><a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li><a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a href="#">子菜单4</a></li> </ul> </li> </ul> </div> ``` CSS代码: ``` .menu { display: flex; justify-content: space-between; } .menu ul { padding: 0; margin: 0; list-style: none; display: flex; } .menu ul li { position: relative; flex: 1; } .menu ul li a { display: block; padding: 10px; background: #f2f2f2; text-align: center; text-decoration: none; color: #333; } .menu ul li ul { position: absolute; top: 100%; left: 0; width: 100%; display: none; background: #fff; z-index: 1; } .menu ul li:hover > ul { display: block; } .menu ul li ul li { display: block; } .menu ul li ul li a { display: block; padding: 10px; background: #f2f2f2; text-align: center; text-decoration: none; color: #333; width: 100%; } ``` 这样,菜单项的宽度将自动根据父元素的宽度进行调整,实现了自适应宽度的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值