12
votes

2 formes HTML côte à côte

J'ai besoin de mettre un bouton de confirmation et d'un bouton Annuler dans une page.

J'ai choisi de créer des formes avec différentes actions, mais les 2 boutons (formulaires) ne sont pas affichés côte à côte.

Comment le faisons-nous sans une table?

Merci!


0 commentaires

3 Réponses :


6
votes

faire à la fois "flotteur: gauche". Et faire l'élément après eux "clair:";

devrait fonctionner :)


1 commentaires

La réponse acceptée ne semblait pas fonctionner, mais cette solution «flottante» a fonctionné.



26
votes

Vous pouvez le faire sans flotteurs, si vous définissez le formulaire et chaque élément à l'intérieur pour être affichage en ligne, ils vont s'asseoir à côté de l'autre. La raison pour laquelle ils ne sont pas côte à côte sont parce que des formes, comme des divs et des paragraphes sont des éléments de niveau des blocs, les définir à afficher en ligne résoudront cela.

Par exemple p>

<div class="button-container">
    <form action="confirm.php" method="post">
        <div>
            <button type="submit">Confirm</button>
        </div>
    </form>

    <form action="cancel.php" method="post">
        <div>
            <button type="submit">Cancel</button>
        </div>
    </form>
</div>


4 commentaires

L'utilisation de l'élément de bouton HTML est une mauvaise idée, car différents navigateurs traitent leurs valeurs de soumission différemment. Utilisez l'élément d'entrée pour les boutons sous formulaires.


Natalie, Sam Defabiia-Kane pourrait avoir raison, mais votre aide était très précieuse! Merci!


Sam - en fait, "bouton" est beaucoup plus polyvalent lors de la conception. Il suffit d'ajouter le type explicitement, ne vous appuyez pas sur les valeurs par défaut d'un navigateur, par exemple. +1 - Si vous voulez des éléments en ligne, faites-les en ligne (ce qui signifie qu'ils ne prennent pas une rangée complète). Il y a des problèmes lorsque vous utilisez des flotteurs, mieux ne pas les utiliser lorsque vous n'en avez pas besoin de flotter.



7
votes

Comme dit si vous voulez des éléments en ligne, faites-les en ligne. C'est mieux:

display:inline-block;


1 commentaires

La réponse acceptée n'a pas fonctionné pour moi, mais cela a fait.