J'essaie de créer un menu à l'aide de balises d'ancrage. Celles-ci doivent être placées les unes à côté des autres, afin que les liens connexes puissent être reliés par une bordure. Voici un exemple de code :
<html>
<head>
<style type="text/css">
a {
border: 1px solid #939393;
margin: 15px;
padding: 8px;
}
a:hover {
border-color: #111;
}
a.collapse-left {
border-left-width: 0px;
margin-left: 0px;
}
a.collapse-right {
border-right-width: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<div class="body">
<a href="#" class="collapse-right primary">This is</a>
<a href="#" class="collapse-right collapse-left click">A group</a>
<a href="#" class="collapse-left hover">Of Three</a>
<a href="#" class="">I am by myself</a>
<a href="#" class="collapse-right">We are</a>
<a href="#" class="collapse-left">a pair</a>
</div>
</body>
</html>Il y a un peu d'espace blanc entre les boutons qui sont regroupés. Cela est dû aux sauts de ligne entre <a> balises. Ces sauts de ligne peuvent être supprimés, et le problème disparaît, mais le code est beaucoup moins lisible.
Est-il possible de conserver les sauts de ligne mais de ne pas faire apparaître les espaces blancs ?
