Table des matières
回复讨论(解决方案)
Maison interface Web tutoriel HTML css样式 设置问题,两个问题_html/css_WEB-ITnose

css样式 设置问题,两个问题_html/css_WEB-ITnose

Jun 24, 2016 am 11:56 AM

问题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>
Copier après la connexion

里面的,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;}
Copier après la connexion

这样写得效果直接就是
那中间两条线 应该就是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;}
Copier après la connexion

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

是用在 行内元素中的换行 


        

  •           

                     
    • 班级信息:
      终极一班

    •               
    • 班级信息:
      终极一班

    •              
    • 班级信息:
      终极一班

    •           

        

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

是用在 行内元素中的换行 


        

  •           

                     
    • 班级信息:
      终极一班

    •               
    • 班级信息:
      终极一班

    •              
    • 班级信息:
      终极一班

    •           

        


.......那个不用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了,真无语
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

See all articles