Quel est le moyen le plus simple de mettre de l'espace entre deux boutons côte à côte en asp.net ?

Question

J'ai deux boutons côte à côte, et j'aimerais qu'il y ait un espace entre eux.

Le code suivant permet de placer deux boutons l'un à côté de l'autre. J'ai essayé la marge pour le div, et je n'ai pas réussi à obtenir un espace agréable entre les deux.

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

Answer 1

Créer une classe de séparation comme suit :

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}

Puis attachez ceci à un div entre les deux boutons

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <div class="divider"/>
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

C'est la meilleure solution, car elle évite le modèle de boîte, qui peut être pénible sur les anciens navigateurs, et n'ajoute pas de caractères supplémentaires qui pourraient être détectés par un lecteur d'écran, ce qui améliore la lisibilité.

Il est bon d'avoir un certain nombre de ces types de divs pour certains scénarios (le plus utilisé est vert5spacer, similaire à celui-ci mais qui place un bloc div de hauteur 5 et de largeur auto pour espacer les éléments d'un formulaire, etc.

Answer 2

Ajouter un espace   entre eux (ou plus selon votre préférence)

    <div style="text-align: center">         
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
        &nbsp;
        <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
    </div>

Answer 3

#btnClear{margin-left:100px;}

Ou ajouter une classe aux boutons et avoir :

.yourClass{margin-left:100px;}

Cela permet de réaliser ceci - http://jsfiddle.net/QU93w/

Answer 4

    <style>
    .Button
    {
        margin:5px;
    }
    </style>

 <asp:Button ID="Button1" runat="server" Text="Button" CssClass="Button" />
 <asp:Button ID="Button2" runat="server" Text="Button" CssClass="Button"/>

Answer 5

Vieux post, mais je dirais que l'approche la plus propre serait d'ajouter une classe à la div environnante et une classe de bouton sur chaque bouton afin que votre règle CSS devienne utile pour plus de cas d'utilisation :

/* Added to highlight spacing */
.is-grouped {   
    display: inline-block;
    background-color: yellow;
}

.is-grouped > .button:not(:last-child) {
    margin-right: 10px;
}

Spacing shown in yellow<br><br>

<div class='is-grouped'>
    <button class='button'>Save</button>
    <button class='button'>Save As...</button>
    <button class='button'>Delete</button>
</div>