Bonjour,
Je cherche un peu d'aide pour un problème de mise en page en css sur lequel je bloque ...
Voila ce que je veux faire :
J'ai 2 input, séparé par un tiret et ensuite un lien pour valider un formulaire.
Le rendu en gros ressemble à ça :
<conteneur><input> - <input> - <a>Valider</a></conteneur>
La taille de mon conteneur est fixe (500px).
La taille des éléments dedans est variable (le site étant prévu pour l'international, le mot valider peut changer).
Ce que je souhaite c'est :
- que la largeur du lien soit variable en fonction du contenu (ne pas fixer a { width:200px; } si finalement le lien fait 3 lettres)
- que les 2 champs s'adapte et remplisse la taille restante.
Voila le code que j'essaye de faire fonctionner sans succès, si vous voulez le modifier :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100px;
}
body {
margin: 0;
padding: 0;
}
#conteneur {
width: 500px;
height: 100%;
display: table;
border:1px solid black;
}
#conteneur input {
display: table-cell;
}
#conteneur a {
display: table-cell;
}
.rouge {background-color: red;}
.bleu {background-color: blue;}
.vert {background-color: green;}
</style>
</head>
<body>
<div id="conteneur">
<input class="rouge"/>-<input class="bleu"/>-<a href="#" class="vert">PUBLIER</a>
</div>
</body>
</html> |
Si quelqu'un peut m'aider, merci d'avance mes tentatives ne donnent vraiment rien de bon.
Merci d'avance.
Partager