communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Utilisez ul+li pour implémenter des tableaux en lignes fines

Utilisez ul+li pour implémenter des tableaux en lignes fines

墨辰丷
Libérer： 2018-05-09 17:31:10
original
2214 Les gens l'ont consulté

Cet article explique principalement comment utiliser ul+li pour obtenir l'effet de table en ligne fine sans table. Les amis très créatifs et intéressés peuvent en apprendre davantage.

Le code est le suivant : 

<!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=gb2312" /> 
<title>write by 阿会楠 环境：IE7+IE6</title> 
<style type="text/css"> 
#ulDate{ 
    width:404px; 
    margin:0; 
    border-top:1px solid #cccccc; 
    border-left:1px solid #cccccc; 
} 
#ulDate li{ 
    float:left; 
    width:100px; 
    height:30px; 
    list-style-type:none; 
    border-right:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    /*非必须*/ 
    line-height:30px; 
    font-size:12px; 
    text-align:center; 
     
} 
</style> 
</head> 

<body> 
<ul id="ulDate"> 
<li style="width:403px;background:#F7F7FF;text-align:center;">时间</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li></li> 
<li></li> 
</ul> 
</body> 
</html>
Copier après la connexion

Recommandations associées :

Comment réaliser un mince table de lignes en html

Exemple de code pour créer une table de lignes fines à l'aide de l'attribut border-collapse:collapse en css

Implémentation CSS de Thin ligne table_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
表格
source：php.cn
Article précédent：css pour obtenir un effet de changement d'image Article suivant：Comment corriger la position en utilisant CSS
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
Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape J'essaie de créer une mise en page similaire à cette image, j'ai essayé d'utiliser cette g...
Depuis 2024-04-06 20:29:08
0
2
492
Guide React.js pour appliquer correctement le pseudo-élément `:after` aux composants stylisés J'ai trouvé cette belle animation soulignée <ul><li><ahref="#">...
Depuis 2024-04-04 22:28:08
0
1
1322
Les symboles d'élément de liste (<ul> et <ol>) dans le nœud racine ne peuvent pas être affichés et supprimés en CSS, et le problème overflow-x: caché ne peut pas être supprimé. Je travaille actuellement sur une page Web et j'ai des problèmes avec les éléments de ma l...
Depuis 2024-04-04 16:38:22
0
1
3617
Expression régulière JavaScript pour conserver le contenu contenant des mots spécifiques et remplacer tout le reste Je suppose que c'est simple, mais j'ai du mal avec la situation suivante : String (HTML pa...
Depuis 2024-04-01 11:06:23
0
2
358
Vue : transition du menu déroulant et comment changer de classe d'un autre élément J'ai eu ceci (très simple) : <divclass="dropdownMenuWrapper"><ulclass=&...
Depuis 2024-03-31 21:34:34
0
1
370
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