Maison >interface Web >tutoriel CSS >css : Solution aux points de style liste et au texte dans li qui ne sont pas centrés
css : Solution aux points de style liste et au texte dans li qui ne sont pas centrés
- 黄舟original
- 2017-06-29 09:32:168134parcourir
Les petits points et le texte de
li list-style ne sont pas centrés ?
<ul>
<li><a>我们开始</a></li>
<li><a2016</a></li></ul>.ul li{
list-style:disc inside;}J'ai l'impression que les petits points et le texte ne sont pas centrés (les petits points sont un peu plus bas). Y a-t-il un moyen de les centrer ?
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo</title></head><style type="text/css">
*{padding:0; margin:0; list-style:none;}
.list{ width:600px; margin:10px auto;}
.list li:before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:#000;
display:inline-block;
margin-right:5px;
vertical-align:middle;
margin-top:-3px;}
</style>
<body>
<ul class="list">
<li>呵呵!</li>
<li>别说话吻我</li>
<li>小火车怎么这么污?</li>
</ul></body></html>Généralement dans cette situation, j'en écris un moi-même en utilisant la pseudo-classe before
C'est facile à contrôler en écrivant un point en utilisant span Supprimez le style de liste de ul. .
Essayez line-height, qui est la même hauteur que le li actuel;
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：Pourquoi list-style:none en CSS ne fonctionne-t-il pas ?Article suivant：Pourquoi list-style:none en CSS ne fonctionne-t-il pas ?