css style setting issues, two questions_html/css_WEB-ITnose

问题1：
如何让li适应嵌套在他里面的内容的高度...

<div style="width=100%;float:left;"> <ul id="ShowLists">    <li >    <div class="tips">班级信息：</div><div class="MainInfo">终极一班</div><br />    <div class="tips">班级信息：</div><div class="MainInfo">终极一班</div><br />    <div class="tips">班级信息：</div><div class="MainInfo">终极一班</div>    </li><li >    <div class="tips">班级信息：</div><div class="MainInfo">终极2班</div><br />    <div class="tips">班级信息：</div><div class="MainInfo">终极2班</div><br />    <div class="tips">班级信息：</div><div class="MainInfo">终极2班</div>    </li><ul>

里面的，li貌似是固定的，不会随着嵌套的div而改变...
下面是我的样式

/*列表项---该列表用于显示用户的简略信息，通常是三行*/    ul{ border-left:1px solid #BEBEBE;border-right:1px solid #BEBEBE; border-radius:10px;padding:0px; overflow:hidden; }ul li{  list-style:none;padding:0px; border-bottom:1px solid #BEBEBE; padding-top:5px; height:auto;  background :url(../AppImages/right.png) no-repeat scroll right center transparent;}

这样写得效果直接就是
那中间两条线 应该就是li得底边框，它高度固定了...
Li的高度不能固定，因为你不知道动态读出来的玩意有多少行...

问题二：div点击高亮效果怎么做，是针对手机web的，当触碰的时候高亮，手指离开的时候恢复...有插件？

回复讨论(解决方案)

li{
    overflow:hidden;
}



2)写js绑定事件  touchstart 手摸上去触发   touchend 手拿开触发 在事件里面设置下class

能说下你在li中加div的目的是什么吗？

li{
    overflow:hidden;
}



2)写js绑定事件  touchstart 手摸上去触发   touchend 手拿开触发 在事件里面设置下class

   overflow:hidden;溢出的东西就隐藏了

能说下你在li中加div的目的是什么吗？

不用div 用 span也是一样的，li都不会自动适应

不管用div 或者span 我只是在给字体加个样式而已 前面的div 字体是粗体....后面的div 点击高亮，带图片，有的带颜色,,,

你在div里用两个span来控制下试试 . 我用li的话右边内容也会被挤下去 , 用span解决了这类问题.

li{
    overflow:hidden;
}



2)写js绑定事件  touchstart 手摸上去触发   touchend 手拿开触发 在事件里面设置下class

   overflow:hidden;溢出的东西就隐藏了

li里面div的样式写出来看看

li{
    overflow:hidden;
}



2)写js绑定事件  touchstart 手摸上去触发   touchend 手拿开触发 在事件里面设置下class

   overflow:hidden;溢出的东西就隐藏了

li里面div的样式写出来看看

.tips{   display:block; float:left; width:97px; font-weight:bold;  text-align:left; height:30px; line-height:30px;  text-overflow: ellipsis; }.MainInfo{   display:block; float:left; width:70%; font-weight:normal;  text-align:left;height:30px;line-height:30px;  text-overflow: ellipsis;    background :url(../AppImages/edit.png) no-repeat scroll right center transparent;}

我才看见 你结构不对
你里面用 0c6dc11e160d3b678d68754cc175188a干嘛
0c6dc11e160d3b678d68754cc175188a是用在 行内元素中的换行 
134067c41741a0a91077a259b851c958
    d7a4965c832e2caa95ae586cbb4c213c
          ff6d136ddc5fdfeffaf53ff6ee95f185
               25edfb22a4f469ecb59f1190150159c6484dbdf39946d73fd1a5ff1c2028fdc8班级信息：16b28748ea4df4d9c2150843fecfba6892631a409c818ac4e4b761b98c2c4d89终极一班16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
              25edfb22a4f469ecb59f1190150159c6484dbdf39946d73fd1a5ff1c2028fdc8班级信息：16b28748ea4df4d9c2150843fecfba6892631a409c818ac4e4b761b98c2c4d89终极一班16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
             25edfb22a4f469ecb59f1190150159c6484dbdf39946d73fd1a5ff1c2028fdc8班级信息：16b28748ea4df4d9c2150843fecfba6892631a409c818ac4e4b761b98c2c4d89终极一班16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
                                          < Why use 0c6dc11e160d3b678d68754cc175188a
0c6dc11e160d3b678d68754cc175188a It is used for line breaks in inline elements
4394587742f9c7fae0b796a2cb1779cf

861f448a2c47375a88adcb954dabc953

                                                                                                                                                                                                                    25edfb22a4f469ecb59f1190150159c6b3f4f65d6abe26886d37c85c7b737a47Class information: 16b28748ea4df4d9c2150843fecfba680c500c21bbe4356c2c77966c361fb316Ultimate Class 116b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
                                                                                                                   ;li>b3f4f65d6abe26886d37c85c7b737a47Class information:16b28748ea4df4d9c2150843fecfba680c500c21bbe4356c2c77966c361fb316Ultimate Class 116b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
   224f1b147a69b1f0e700f8d329635183
                                                 There is no br in front... It is made with 45a2772a6b6107b401db3c9b82c049c2, 45a2772a6b6107b401db3c9b82c049c2 is an inline element... Because the two types of tips use pixels, and MainInfo uses percentages. It is displayed on the computer screen and has a much wider width. I just added a br. . Later, I thought span was inline, so Li was highly invalid. I changed the tips and MainInfo to display:block; later I found that it didn't work, so I tried div again.. and found that it didn't work either, so I posted it and asked, the code It hasn’t changed...
It’s not possible without br now

The height of li will change with the size of the content. I can't see all of your code and can't figure out what's wrong.
You can add borders to li, div and other elements for debugging


The height of li will change with the size of the content. I can't see all of your code and can't figure out what's wrong.
You can add borders to li, div and other elements for debugging

You are right. The height of li will change with the size of the content. I will use jq to test it. Click this li's $(this).html(); was found to be correct
But if you add a border, it seems that the border will not change with li. Later, I didn't want the border of li, I used the border of div I found it didn’t work

Now I switched to table, I’m really speechless