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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
<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 :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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.