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了,真无语

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
