Home > Web Front-end > HTML Tutorial > css style setting issues, two questions_html/css_WEB-ITnose

css style setting issues, two questions_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-24 11:56:23
Original
1025 people have browsed it

问题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>
Copy after login

里面的,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;}
Copy after login

这样写得效果直接就是
那中间两条线 应该就是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;}
Copy after login

我才看见 你结构不对
你里面用 
干嘛

是用在 行内元素中的换行 


        

  •           

                     
    • 班级信息:
      终极一班

    •               
    • 班级信息:
      终极一班

    •              
    • 班级信息:
      终极一班

    •                                           < Why use


      It is used for line breaks in inline elements

      •                                                                                                                                                                                                                    

      • Class information:
        Ultimate Class 1

      •                                                                                                                    ;li>
        Class information:
        Ultimate Class 1

           
                                                         There is no br in front... It is made with , 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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template