Botón que se parece al enlace

Hola, tengo un requisito en el que no puedo usar javascript en la página. Tuve algunos asp:LinkButtons pero estos aparecí a usar javascript así que los reemplazó con botones:Botón que se parece al enlace

<asp:Button ID="titleButton" runat="server" BorderStyle="None" CommandArgument='<%# Eval("Id") %>' OnClick="downloadButtonClick" Text="Download" CssClass="ButtonAsLink" />

con CSS:

.ButtonAsLink 
{ 
    background-color:transparent; 
    border:none; 
    color:blue; 
    cursor:pointer; 
    text-decoration:underline; 
    font-weight:bold 
}

Esto funciona como yo quería, pero el texto del botón no se alinea con las etiquetas en la misma columna debido a los márgenes entre el borde del botón y el texto.

Me pregunto si alguien me puede decir cómo establecer el margen de texto del botón en cero?

Fuente

2011-03-06 Coder 2

posible duplicado de [Cómo hacer que el botón se parece a un enlace?] (Http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link) –

.ButtonAsLink{ 
    background-color:transparent; 
    border:none; 
    color:blue; 
    cursor:pointer; 
    text-decoration:underline; 
    font-weight:bold; 
    padding: 0px; 
}

Establezca el relleno del elemento en 0px si desea eliminar todo el relleno o puede utilizar el atributo de esta manera.

padding: 0px 0px 0px 0px;

Por supuesto que puede tener cualquier valor numérico positivo en lugar de cero. la orientación del relleno en este atributo que se refiere a la valuesis numérico:

padding: parte superior parte inferior derecha dejó

Última nota: El margen es el espacio alrededor de un elemento y otros elementos que lo rodean. Relleno es el espaciado del área dentro de un elemento (por ejemplo, texto dentro de a)

Fuente

2011-03-06 23:59:06

Genial, gracias por señalar la diferencia entre los márgenes y el relleno. –

Oye, no hay problema :) –

nota: font-weight: bold necesita un punto y coma después. SO no me permite hacer ediciones de un personaje. –

¿Qué hay de establecer los márgenes y el relleno en su estilo?

Fuente

2011-03-06 23:57:11 rcravens

debe usar un archivo de restablecimiento css para aliviar tales problemas de presentación –

De acuerdo ......... – rcravens

Intente agregar 'margin: 0; relleno: 0; 'a sus propiedades de CSS. También puedes intentar forzar: 'display: inline;' – vbence

Aquí, comparto algo que podría funcionar para usted. No es perfecto, pero podría ser un punto de partida para ti.

http://jsfiddle.net/Gj9R6/1/

Fuente

2011-03-07 00:08:54

Respuesta

Cuestiones relacionadas