Bonjour à tous!
J'essaie d'améliorer la mise en forme de mes formulaires et pour cela je voudrais qu'ils soient à coter horizontalement.

Voici mes codes :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"W>
		<title>Faire un don </title>
		<link href="../css/test.css" rel="stylesheet" /> 	<!-- On va chercher le fichier CSS  -->
	</head>
	
	<body>
		<header>
			<div> <a href="accueil.html"> <img src="images/tortue.jpg" alt="logo_tortue" class="logo"> </a> </div>  
			<div> <a class="logo_nom" href="accueil.html"> La tortue </a> </div>  
			<nav class="nav">
    			<ul>	
    				<li> <a href="qui_sommes_nous.html" class="titre"> Qui sommes nous ? </a> </li>
					<li> <a href="champs_d'action.html"> Nos champs d'action </a> </li>
					<li> <a href="agir.html"> Agir </a> </li>
					<li> <a href="contact.html"> Contact </a> </li>
					<li> <a href="FAQ.html"> FAQ </a> </li>
					<li id="faire_un_don"> <a href="faire_un_don.html" title="c'est grâce à vous que nous pouvons agir" target="_blank"> Faire un don </a> </li>
  				</ul>
			</nav>		
		</header>
		
		
		<main id="don">
				<form>
				
				<div class="donne">
				<fieldset> <!-- Un deuxième formulaire qui permet de faire un don. Le type radio permet de cocher un case. Ou le type text pour remplir un montant particuler.  -->
				<legend> Le montant que je donne </legend>
					<p>  
						<input type="radio" name="don" value="10" /> 10€
						<input type="radio" name="don" value="20" /> 20€
						<input type="radio" name="don" value="50" /> 50€
						<input type="radio" name="don" value="100" /> 100€ <br /> <br />
						Saisir un autre montant : <input type="text"  name="don" value="" /> 
					</p>
				</fieldset>
		
				
				<fieldset> 
				<legend> Mes coordonnées </legend>
					<p> Ces informations sont nécessaires à l'établissement de votre reçu fiscal. </p>
					
						nom : <input type="text" name="nom" value="" /></br><br/>
						prenom : <input type="text" name="prenom" value="" /></br><br/>
						email : <input type="email" /></br><br/>
						telephone : <input type="tel" /></br><br/>
						adresse :<input type="text" name="adresse" value="" /></br><br/>
						ville : <input type="text" name="ville" value="" /></br><br/>
						code postal : <input type="text" name="cp" value="" /></br>	
				</fieldset>	
				</div>
				
				
				<div class="donne">
				<fieldset>
					<legend> Mon réglement </legend>
					<p> Cette page est 100% sécurisée. </p>
					<p> SÉLECTIONNEZ VOTRE CARTE DE PAIEMENT </p>
					
					
					<div class="type">
					<p>
						<input type="radio" name="type" value="MC" />
							<label for="type"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Mastercard_2019_logo.svg/1200px-Mastercard_2019_logo.svg.png" alt="" /></label>
						<input type="radio" name="type" value="V" />
							<label for="type"><img src="https://d1yjjnpx0p53s8.cloudfront.net/styles/logo-thumbnail/s3/0013/4323/brand.gif?itok=fSmoZrGH" alt="" /></label>
						<input type="radio" name="type" value="CB" />
							<label for="type"><img src="https://www.reussir-mon-ecommerce.fr/wp-content/uploads/2016/03/logo-cb-1.jpg" alt="" /></label>
					</p>
					</div>
					
					<p>
						saisissez votre numéro de carte bancaire : <input type="text" name="numcarte" value="" maxlength="16"></br><br/>
						date d'expiration : <input type="date" name="date_expir"></br><br/> 
						code de sécurité : <input type="password" name="code" maxlength="3" maxlength="3" /></br><br/>
					</p>
				</fieldset>
				
				<p>
					<input type="submit" value="Valider mon don par carte bancaire" />
				</p>
				</div>
				
			</form>
		</main>



#don {

	display : flex;
    justify-content: space-around;
}


je vous remercie par avance!
Modifié par alex9869 (13 Apr 2019 - 17:48)
Administrateur
Hello,

Tu as deux soucis principaux :

1- Ce n'est pas à #don d'être le flex-container puisque son seul enfant est <form>. Ce serait donc plutôt à <form> car ce sont ses enfants que tu veux afficher côte à côte
2- Tes images sont très larges et imposent leur taille à leurs parents, cela fausse le résultat. En leur imposant une taille cela corrige ce souci.

En résumé cela donnerait :
form {
  display : flex;
}
img {
  width: 100px;
}


Bonne soirée Smiley smile
Meilleure solution