Maison > Article > interface Web > Comment résoudre le problème d'espacement entre l'étiquette et la saisie dans Google Browse
Comment résoudre le problème d'espacement entre l'étiquette et la saisie dans Google Browse
- php中世界最好的语言original
- 2018-02-03 10:07:192822parcourir
Cette fois, je vais vous montrer comment résoudre le problème de l'espacement entre les étiquettes et les entrées dans la navigation Google. Quelles sont les précautions pour résoudre le problème de l'espacement entre les étiquettes et les entrées dans la navigation Google. est un cas pratique. Jetons un coup d'œil une fois.
<!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>
div {width:500px;
height
:500px;
margin
:0 auto; border:#000 solid 1px;}
label {
display
:inline-block; width:100px;border:#000 solid 1px;}
input { border:#000 solid 1px;}
</style>
</head>
<body>
<div>
<p><label>账号</label><input type="text" /></p>
<p><label>密码</label><input type="text" /></p>
<p>
<label>
验证码
</label>
<input type="text" /><img src="" width="100" height="20" />
</p>
</div>
</body>
</html>La distance entre l'étiquette et la saisie du code de vérification est évidemment plus grande que les deux ci-dessus. Après avoir supprimé les sauts de ligne du code de vérification et en avoir fait une seule ligne, les trois zones de saisie sont alignées. La raison n'est pas encore claire.
PS : img et input ne sont pas alignés comme indiqué dans les essais précédents. Il vous suffit d'ajouter respectivement vertical-align:middle
Je crois que vous l'avez maîtrisé. après avoir lu ces cas, pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser CSS pour définir la largeur de INPUT dans TD
Comment ajouter des styles aux images pour les boutons radio et à sélection multiple
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!