communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

如何让li保持在ul里面_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-21 09:31:54
original
1188 Les gens l'ont consulté

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{	pading:0px;    margin:0px;	border:double;}li{	list-style-type:none;	float:left;	width:200px;	display:inline-block;}.classmate{	padding:20px;}.exteninfo{	clear:both;}ul{	padding:0px;}</style>	</head><body><div class="classmates">	<div class="classmate">		<div class="baseinfo">			<ul>				<li>姓名</li>				<li>性别</li>				<li>生日</li>				<li>邮箱</li>				<li>电话</li>				<li>qq</li>			</ul>		</div>		<div class="recommend">			<p>alkjshfgkahafo;alsksdfkhasdklfhasdjfkjasiuaebhgjlsdhg;hseikgh</p>		</div>	</div></div>
Copier après la connexion

在ul里面的li如果使用float使他在一行显示的话,外面的ul的框就很矮.li比ul高.如果使用display:inline使他在一行显示的话,li的宽度就无法设置 始终是最小宽度.请问怎么才能让他又在一行显示,li的宽度又可以设置,外面ul的高度也可以包围住li


回复讨论(解决方案)

分别为ul和li设置高度，使ul能够包围li

ul{overflow:hidden;}

分别设置高度不是很灵活.解决方法我发现是使用dispaly:inline-block

overflow:hidden;加个这个就可以了

ul加个overflow:auto，或者让ul跟LI一样浮动起来。。或者是加固定的宽高

Étiquettes associées：
如何让li保持在ul里面
source：php.cn
Article précédent：css position 问题_html/css_WEB-ITnose Article suivant：ie hover z-index没效果_html/css_WEB-ITnose
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1902
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2074
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1742
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1647
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1656
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal