web-dev-qa-db-fra.com

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

J'ai 2 boutons côte à côte et j'aimerais avoir un peu d'entre eux.

Le code suivant aura 2 boutons l'un à côté de l'autre. J'ai essayé de la marge pour la div, et je ne pouvais pas obtenir un espace de Nice 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>
htmlcssbuttonspace
40
user570185

créez une classe de diviseur comme suit:

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

Puis attachez-le à 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 le meilleur moyen d’éviter le modèle de boîte, ce qui peut poser un problème pour les anciens navigateurs, et n’ajouter aucun caractère supplémentaire qui serait capté par un lecteur d’écran, ce qui en améliore la lisibilité.

Il est bon d’avoir un certain nombre de ces types de divs dans certains scénarios (le plus utilisé est vert5spacer, mais met un div de bloc de hauteur 5 et de largeur automatique pour espacer les éléments d’un formulaire, etc.

68
Michael Allen

Ajouter un espace &nbsp; entre eux (ou plus selon vos préférences)

    <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>
35
QuinnG
#btnClear{margin-left:100px;}

Ou ajoutez une classe aux boutons et obtenez:

.yourClass{margin-left:100px;}

Ceci réalise ceci - http://jsfiddle.net/QU93w/

28
Alex
    <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"/>
15
WraithNath

Essayez de mettre la classe suivante sur votre seconde bouton

.div-button
{
    margin-left: 20px;
}

Edit:

Si vous souhaitez que votre premier bouton soit espacé du div ainsi que du deuxième bouton, appliquez cette classe à votre premier bouton et également .

8
Mahesh Velaga

Ancien post, mais je dirais que l'approche la plus propre consisterait à ajouter une classe à la div environnante et une classe de boutons sur chaque bouton afin que votre règle CSS devienne utile pour davantage 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>
6
prograhammer

J'ai utilisé &nbsp; et ça fonctionne bien. Vous pouvez l'essayer. Vous n'avez pas besoin d'utiliser les guillemets

5
azibit

Pouvez-vous juste juste quelques &nbsp;?

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

Il y a une autre façon de le faire:

<span style="width: 10px"></span>

Vous pouvez ajuster la quantité d’espace en utilisant la propriété width.

Votre code serait:

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

Si vous utilisez bootstrap, ajoutez ml-3 à votre deuxième bouton:

 <div class="row justify-content-center mt-5">
        <button class="btn btn-secondary" type="button">Button1</button>
        <button class="btn btn-secondary ml-3" type="button">Button2</button>
 </div>
0
Manish Jain

Si vous souhaitez que le style soit appliqué globalement, vous pouvez utiliser le combinateur adjacent de CSS.

.my-button-style + .my-button-style {
  margin-left: 40px;
}

/* general button style */
.my-button-style {
  height: 100px;
  width: 150px;
}

Voici un violon: https://jsfiddle.net/caeLosby/10/

Il est similaire à certaines des réponses existantes mais il ne définit pas la marge sur le premier bouton. Par exemple dans le cas

<button id="btn1" class="my-button-style"/>
<button id="btn2" class="my-button-style"/>

seulement btn2 obtiendra la marge.

Pour plus d'informations, voir https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

0
Tobias Schwarzinger