2 qq 34105558 qq_34105558 于 2016.03.16 19:46 提问

HTML中li的宽度怎么和内容自动符合

li背景色红色、第一个li里是abcdefg,第二个li里是abc,第三个li里是abcdefghijkn、怎么能让li的宽度自动和内容文字一样

2个回答

danielinbiti
danielinbiti   Ds   Rxr 2016.03.16 20:20
已采纳
 <style>
li{
  background-color:red;
  width:auto;
  float:left;
}
</style>
<body>
<li>abcdefg</li></br>
<li>abc</li></br>
<li>abcdefghijkn</li>
</body>

qq_21792169
qq_21792169   2016.03.16 20:39

配合ul在div配合css就可以实现你说的

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
横排Li的自适应宽度
我们在做网页导航的时候,最常用的就是让Li左浮,但是浮动对象要给固定宽度,不然在ie下会出现撑开的情况,导航的话没有问题,一般都是两个字或者四个字,固定宽度也比较美观,今天就碰到一个问题是翻页代码用浮动li实现,因为页码有一位数,两位数,还有三位数四位数,那么固定宽度显然不能满足要求,于是乎,改用li的display:inline;问题解决了,实现同样的效果,宽度自适应^_^ 
div ul li 嵌套后解决高度自适应方法
div ul li 嵌套后解决高度自适应办法: html代码如下 daugli-1webServer-1web Server   CSS代码如下: .main_div {  width:80%;  margin-top: 15px;  margin-right: 26px;  margin-bottom: 15px;  margin-left: 26px;
设置 li自适应宽度
原文:http://hi.baidu.com/yingjianglinx/item/c2d868fc49a6b15bc9f337e4 1、设置float属性的li里的链接也为float属性//这个属性也没用到 2、设置li的高度,设置overflow:hidden属性。//我这里是IE8,没有用到这一条 3、设置li属性white-space:nowrap;//文本不换行用到了,
css防止ul下的li换行(li超出宽度变成…)代码
在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里   分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。 我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下
div嵌套ul时div的宽度和高度自适应
div中嵌套ul时div的宽度和高度随着ul里元素的变化而变化,下面是一个事例,可以改变li元素的内容和个数去验证: div高度自适应 .adaption{ border:solid 1px #00FF00; overflow:auto;  /**高度自适应**/ float:left;  /**宽度自适应**/ position: relative; }
如何让li中内容显示超过长度后以省略号显示
文字溢出时显示省略号 重点: li {     width: 200px;   (定义宽度)     white-space: nowrap; (不换行,一行显示)     text-overflow: ellipsis;  (溢出用省略号)      -o-text-overflow: ellipsis;       overflow: hidden;   (多出的文字,隐
html li 背景色 大小
调整背景色的大小: #nav ul li a{text-decoration:none; padding:4px 0px 4px 0px;}
ul+li实现类似table的自适应宽度布局
商品名称 市场价 订购价 数量 操作 [鲜花]一往情深一精品玫瑰礼盒:19枝红玫瑰,勿忘我适量 ¥ 329 ¥ 239
html——ul、li导航栏居中的两种办法
总结了下导航栏的制作方法:一种是用float设计,提前设置好高度与宽度,然后将要显示的元素设置为float::left依次显示。 ji
ul li宽度超出div宽度点击左右箭头移动
转载自:http://blog.csdn.net/chenhisen/article/details/50337377             无标题文档         ul{margin:0;padding:0;}     li{list-style:none;}     .box{width: 500px; margin: au