简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Utilisez ul+li pour implémenter des tableaux en lignes fines

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

墨辰丷
墨辰丷original
2018-05-09 17:31:102155parcourir

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>

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!

Déclaration：
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
Article précédent：css pour obtenir un effet de changement d'imageArticle suivant：css pour obtenir un effet de changement d'image

Articles Liés

Voir plus