Icons don’t line up

Asked

Viewed 433 times

1

Good morning. I have two icons inside a table and I need them to be on the same line. When the page loads they are aligned:

inserir a descrição da imagem aqui

But when I navigate to another tab and go back to that tab, the icons look like this:

inserir a descrição da imagem aqui

Follow my code:

<td style="width:10%; max-height:20px">
 <span class="glyphicon glyphicon-pencil btn blue-madison" data-toggle="tooltip" data-placement="top" title="Editar" style="float:left; position:static">
    <a href="#" class="">
    </a>
 </span>

 <span class="glyphicon glyphicon-trash btn red exclusao" data-toggle="tooltip" data-placement="top" title="Excluir" style="float: right; position: static">
    <a href="#" class="">
    </a>
 </span>

What could I be doing wrong? or what I’m forgetting?

Grateful to those who help.

html css twitter-bootstrap

  • Gabriel, avoid using CSS inside the HTML elementl, try taking the style of glyphicon-trash

  • glyphicon-trash appears to be a class that carries its own icone and perhaps other configurations relating to it.. I can only think that a clear:Both|left|rght is in the style of these glypcon (one or two)..

1 answer

1

Try not to use CSS inside the HTML element. To create buttons use the element button of html5.

Try it this way:

<table>
    <thead>Tabela
       <th>Ações</th>
    </thead>
<tbody>
<td>

<button class="btn btn-warning">
  <span class="glyphicon glyphicon-trash"></span>
</button>

<button class="btn btn-success">
  <span class="glyphicon glyphicon-pencil"></span>
</button>

</td>
</tbody>
</table>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.