Tengo un clásico de la tabla HTML. En una columna quiero añadir 3 iconos con enlaces a editar por ejemplo los usuarios. Estoy usando twitter bootstrap y glyphsicons. Cómo hacer más espacio entre los iconos???
Yo prefiero usar CSS.

<td>
   <a href='#'>
       <i class='icon-ok'></i>
   </a>
   <a href='#'> 
       <i class='icon-pencil'></i> 
   </a> 
   <a href='#'>
       <i class='icon-remove'></i>
   </a>
</td>
  • td i { padding-left: 3px; padding-right: 3px; }
  • i { display: block; margin: 0 5px; }. Usted puede cambiar el selector para ser más específicos y 5px al espacio ancho que desee
  • Brendle SÍ muy bueno GRACIAS
InformationsquelleAutor Beginner | 2013-09-02

5 Comentarios

  1. 8

    Basta con aplicar un relleno (o un margen, dependiendo del estilo que he usado) entre los elementos, por ejemplo,

    td a + a {
       padding-left: 3em;
    } 
    • se corrió como un encanto
  2. 2

    tienes que utilizar padding atributo en style etiqueta.

    <td>
        <a href='#'><i class='icon-ok'></i></a>
        <a style="padding-left:25px;" href='#'><i class='icon-pencil'></i></a>
        <a style="padding-left:25px;" href='#'><i class='icon-remove'></i></a>
    </td>
  3. 0

    Normalmente un etiquetas son elementos en línea. Así, el cuadro de modelo no es lo que esperabas. Yo voy a sugerir

    a {
       display: inline-block;
       margin: 0 10px 0 0;
    }
  4. 0

    Darles un margen derecho (margen de no trabajar en los elementos en línea):

    .icon-ok { padding-right: 1em; }
    .icon-pencil { padding-right: 1em; }

    Si quieres evitar el espacio después de la última icono, usted puede dar a los alrededores de la celda de la tabla negativo en el margen derecho (de modo que los dos de eliminar cada uno de los otros) o el uso más complejo de reglas CSS a cancelar el último hueco.

Dejar respuesta

Please enter your comment!
Please enter your name here