8 réponses
La bordure qu'il a insérer est sans doute pour repérer visuellement les 2 "li".
Ceci dit, 50 %*2=100% ...si vous voulez une marge de 5px; tout en gardant les 2 "li" sur la même ligne, il faut bien jouer sur les dimensions des "li"..non?
Ceci dit, 50 %*2=100% ...si vous voulez une marge de 5px; tout en gardant les 2 "li" sur la même ligne, il faut bien jouer sur les dimensions des "li"..non?
Bien sûr !
<ul>
<li>
Premier élément
</li>
<li>
Second élément
</li>
</ul>
CSS:
ul {
position: relative;
overflow: auto;
margin: 0;
padding: 0;
color: #531AFF;
list-style: none;
}
li {
float: left;
margin: 5px;
width: 50%;
}
Là forcément mon deuxième élément est mis à la ligne puisque mes deux li font 50% + 10px ; hors je voudrais que les deux éléments soient sur la même ligne. forcément les margin seraient prises en compte par pour être comprises dans le %.
Merci
<ul>
<li>
Premier élément
</li>
<li>
Second élément
</li>
</ul>
CSS:
ul {
position: relative;
overflow: auto;
margin: 0;
padding: 0;
color: #531AFF;
list-style: none;
}
li {
float: left;
margin: 5px;
width: 50%;
}
Là forcément mon deuxième élément est mis à la ligne puisque mes deux li font 50% + 10px ; hors je voudrais que les deux éléments soient sur la même ligne. forcément les margin seraient prises en compte par pour être comprises dans le %.
Merci
<!DOCTYPE html>
<html>
<head>
<title>essai</title>
<meta charset="UTF-8" />
<style type="text/css">
ul {
overflow: auto;
color: #531AFF;
list-style: none;
}
li {
width: 48%;
margin: 5px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>
Premier élément
</li>
<li>
Second élément
</li>
</ul>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je ne souhaite pas changer la valeur des li, elle doit rester à 50%. De plus à quoi sert le border ici ?
Tout le problème est là; il faut que les margin soient comprises DANS le calcul du PC pour faire en sorte qu'elle comptent dans les 50%.
Je sais pas si vous comprenez bien ? :/
Tout le problème est là; il faut que les margin soient comprises DANS le calcul du PC pour faire en sorte qu'elle comptent dans les 50%.
Je sais pas si vous comprenez bien ? :/
bonjour si vous voulez que vos li soit cote a cote il faut utiliser
Pour ce qui est des margin je vois exactement se que vous voulez dire mais je vous comprend pas.50% + 50% = 100% et si vous voulez qu 'il soit comprit dedans c est impossible enfin je pense....il faut réduire les width il n y a pas le choix et les border c'était juste pour voir les bordure
display: inline-block;
Pour ce qui est des margin je vois exactement se que vous voulez dire mais je vous comprend pas.50% + 50% = 100% et si vous voulez qu 'il soit comprit dedans c est impossible enfin je pense....il faut réduire les width il n y a pas le choix et les border c'était juste pour voir les bordure
Bonsoir,
En fait je voudrais espacer mes deux éléments de 5px mais qu'ensuite ils aient la largeur de 50% chacun. Donc admettons, mon div parent fait 900px de large, je fais en sorte que les deux li aient une margin à gauche et à droite de 5px (2*2,5px au milieu) ce qui donne :
un espace de 5px
un li de 50%
un espace de 5px
un li de 50%
un espace de 5px
la valeur 50% = 442,5 (mais moi je dois rentrer la valeur 50% et non 442,5 puisque je suis en train de faire le site en responsive et je travaille en %).
En fait je voudrais espacer mes deux éléments de 5px mais qu'ensuite ils aient la largeur de 50% chacun. Donc admettons, mon div parent fait 900px de large, je fais en sorte que les deux li aient une margin à gauche et à droite de 5px (2*2,5px au milieu) ce qui donne :
un espace de 5px
un li de 50%
un espace de 5px
un li de 50%
un espace de 5px
la valeur 50% = 442,5 (mais moi je dois rentrer la valeur 50% et non 442,5 puisque je suis en train de faire le site en responsive et je travaille en %).
mathématiquement, sur une base de 900px, l'écart de 5px correspont à une valeur 0.55%
en css, pas possible
En résumé vous voulez 2 li de meme largeur avec un écart gauche/centre/droite équivalent à 5px
Vous avez déjà votre largeur de conteneur
Faite les calculs, adaptez vos dimensions pour arriver au résultat voulu, c'est ça aussi le CSS
Et arretez de vous buter sur cette valeur de 50%, on vous là dit plusieurs fois :
2 élément avec un width de 50% dans le meme conteneur = PAS de marge
aussi : site en responsive et je travaille en % et mon div parent fait 900px de large sont contradictoires
en css, pas possible
En résumé vous voulez 2 li de meme largeur avec un écart gauche/centre/droite équivalent à 5px
Vous avez déjà votre largeur de conteneur
Faite les calculs, adaptez vos dimensions pour arriver au résultat voulu, c'est ça aussi le CSS
Et arretez de vous buter sur cette valeur de 50%, on vous là dit plusieurs fois :
2 élément avec un width de 50% dans le meme conteneur = PAS de marge
aussi : site en responsive et je travaille en % et mon div parent fait 900px de large sont contradictoires
Comme le signale @tryan44, si les 2 li sont à 50%, il n'y a plus d'espace de manoeuve ...