css样式 设置问题,两个问题_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;}
我才看见 你结构不对
你里面用
干嘛
是用在 行内元素中的换行
-
-
班级信息:终极一班
-
班级信息:终极一班
-
班级信息:终极一班
-
我才看见 你结构不对
你里面用
干嘛
是用在 行内元素中的换行
-
-
班级信息:终极一班
-
班级信息:终极一班
-
班级信息:终极一班
-
.......那个不用br也不行,跟br没关系的.....
我前面是没有br的...是用做的,是行内元素...因为两个类tips是用像素的,MainInfo用百分比,在电脑屏幕显示,宽度多了,我就加了个br。。后来我以为是span是行内,所以Li高度无效..我就把tips,MainInfo改了了display:block;后面发现还不行,我又试了div..发现也不行,就贴出来问了,代码就没改...
现在没有br 也是不行的
li的高度是会随内容大小变化的。看不到你全部的代码,找不出哪儿错了。
你可以给li,div等元素加上border进行调试
li的高度是会随内容大小变化的。看不到你全部的代码,找不出哪儿错了。
你可以给li,div等元素加上border进行调试
你这话是对的,li的高度是会随内容大小变化的,我用jq 测试一下 点击这个li的$(this).html();发现都是对的
但是如果你加了border 貌似 border就不跟li一起变化了,后来我不要li的border,我用div的border发现不行
现在我改用table了,真无语

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...
