J'essaie de styler une section avec un titre et un bouton ci-dessous et de vouloir que les boutons restent parfaitement en ligne, quelle que soit la taille du navigateur (sauf sur mobile auquel cas-t-on pile). En raison du fait qu'il y ait plus de texte dans un titre que l'autre, lorsque je modifie la taille de l'écran, certains des titres vont d'une ligne pour utiliser deux lignes forcant le bouton pour aller plus bas sur la page pendant que l'autre bouton reste.
J'ai les éléments dans les boîtes flexibles, mais y a-t-il un moyen de les forcer à rester en ligne les uns avec les autres? P> - H2>
EDIT: P>
Qu'est-ce que j'ai essayé de retirer les boutons et de les mettre dans leur propre section ci-dessous. P>
J'ai aussi essayé cette solution ici en ciblant la nouvelle carte de section, pas de succès. p>
Ceci est mon code d'origine avec le problème. p>
p>
<!-- Section: Client Resources -->
<section id="clients" class="py-1">
<div class="container">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
<div class="items py-1">
<div class="cr">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<button class="cr-btn">LOGIN</button>
</div>
<div class="cr">
<h2>
American Equity Access
<p></p>
<button class="cr-btn">LOGIN</button>
</h2>
</div>
<div class="cr-last">
<h2>
American Equity Access
<p></p>
<button class="cr-btn">LOGIN</button>
</h2>
</div>
</div>
</div>
</section>5 Réponses :
Il ressemble à ce que vous voulez réaliser peut être fait avec la propriété Vous pouvez en savoir plus sur le site de la documentation de MDN, trouvé dans le lien ci-dessous: https://developer.mozilla.org/fr/fr -Us / Docs / Web / CSS / Flex-Wrap flex-wrap . Vous voudrez définir sa valeur sur Nowrap .
Ajouter Comme il n'y a pas de code, il est difficile de savoir si cette solution fonctionnera correctement et rend certaines hypothèses sur votre code. P> P> Marge-haut: auto; code> sur les boutons. Cela les obligera au fond de la flexbox.
<div class="row">
<div class="card">
<h2>Title Short</h2>
<div class="button">Button</div>
</div>
<div class="card">
<h2>Title Long Title Long Title Long</h2>
<div class="button">Button</div>
</div>
<div class="card">
<h2>Title Short</h2>
<div class="button">Button</div>
</div>
</div>
Une étiquette de bloc en ligne comme doit généralement forcer les deux divs des autres les uns des autres. Sans voir / essayer votre code actuel, il est difficile de dire exactement comment le faire concernant vos besoins mobiles. Il existe une méta-balise pour la fenêtre comme ce qui suit qui prend en charge beaucoup de problèmes de style mobile: si ce n'est pas ce que vous avez l'intention de résultat, de quoi Vous aimez réellement les divs à faire lorsque l'écran est trop petit? Si l'un d'entre eux disparaîtra? En outre, vous pouvez avoir d'autres styles sur votre page qui causent un espace supplémentaire (marges, rembourrage, autres divs ou autres éléments) pouvant causer une certaine espace supplémentaire que vous ne vous attendez pas.
Faites-le sur vos éléments,
Affichage: Inline-Block;
Cela les collera ensemble et les alignera.
Une autre solution est ajout Votre et dans votre et vos éléments seront également réactifs. J'ai fait une Jsfiddle: l'exemple Jsfiddle flex-direction: ligne et justify-contenu: Centre à votre # CLIENTS .ITEMS ELEMENT, afin de le rendre relatif à la largeur de la fenêtre. #Clients .items élément CSS devrait louer ci-dessous: #Clients .Cr Ajouter largeur: 100% et supprimer max-largeur: 30% < / code>. Après cela et que votre élément CSS sera comme ci-dessous:
Bienvenue dans le débordement de la pile! La question postée ne semble pas inclure de tentative de résoudre le problème. Stackoverflow s'attend à ce que vous essayiez d'abord de résoudre votre propre problème, car vos tentatives nous aident à mieux comprendre ce que vous voulez. Veuillez modifier la question pour montrer ce que vous avez essayé, afin d'illustrer un problème spécifique que vous rencontrez dans un exemple minimal, complet et vérifiable . Pour plus d'informations, s'il vous plaît voir Comment demander et prendre le Tour .