如何删除HTML中的span标签之间的折线

Question

it appears that my <span> tags causes a new line break inside my <td> . how do you normally fix this?

<tr>
<td> date</td> <!--date--> 
<td> <span class="icon1"> <img here> </span> | <span class="icon2"> <img here> </span> </td> <!--action-->
</tr>

[update = added css]

.icon1{
    width:22px;
    height:22px;
    background-color:#eb2960;
    display:block;
    border-radius:4px;
    cursor: pointer; cursor: hand;
}

Answer 1

Use display: inline-block for the .icon .

display: block causes a line break before and after the element.

Answer 2

Change:

.icon 1{
    ...
    display:block;
    ...
}

to:

.icon 1{
    ...
    display:inline-block;
    ...
}

You had to know that display in block separates things with a line break... :P

As you can see in this jsfiddle the span doesn't affect to any element of the td.