cuál es la forma más fácil de poner espacio entre 2 botones uno al lado del otro en asp.net

Question

Tengo 2 botones uno al lado del otro, y me gustaría tener algunos entre ellos.

El siguiente código tendrá 2 botones uno al lado del otro. He intentado con margen para el div, y simplemente no pude obtener un buen espacio entre los dos.

<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

¿Puedes simplemente unos  ?

<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> 

Answer 2

Añadir un espacio   entre ellos (o más dependiendo de su preferencia)

<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

trate de poner la siguiente clase en el botón segundo

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

Editar:

Si desea que su primer botón esté espaciado del div y del segundo botón, aplique esta clase a su primer botón también.

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

#btnClear{margin-left:100px;} 

O agregar una clase a los botones y tienen:

.yourClass{margin-left:100px;} 

Esto lo consigue - http://jsfiddle.net/QU93w/

Answer 6

crear una clase divisor de la siguiente manera:

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

A continuación, adjuntar esto a una div entre los dos botones

<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> 

Ésta es la mejor manera, ya que evita el modelo de caja, que puede ser un dolor en los navegadores antiguos, y no añade ningún caracteres adicionales que serían recogidos por un lector de pantalla , así que es mejor para la legibilidad.

Es bueno tener un número de estos tipos de divs para ciertos escenarios (el más usado es vert5spacer, similar a esto pero coloca un div div con altura 5 y ancho automático para espaciar los elementos en un formulario etc.

Answer 7

que utilizan   y se está trabajando muy bien Usted podría intentar que no es necesario utilizar las comillas

Answer 8

Hay otra manera de hacerlo:..

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

Puede ajustar la cantidad de espacio usando la propiedad de ancho.

Su código sería:

<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> 

Answer 9

Mensaje viejo, pero yo diría que el enfoque más limpio sería añadir una clase para el div que rodea y una clase de botón en cada botón para que su regla CSS se vuelve útil para más casos de uso:

/* 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>