Link with image on one line

Can someone help me to bring the arrows and the text on one line? (see image) The link tag should fill out the "th" (display:block).

HTML:

<th colspan="1" rowspan="1" class="ui-state-default">
<a href="http://www.example.com">example</a>
<span class="ui-icon ui-icon-carat-2-n-s"></span>
</th>

CSS:

.ui-icon { width: 16px; height: 16px; background-image: url(../images/ui-icons_222222_256x240.png); }
.ui-icon-carat-2-n-s { background-position开发者_如何学编程: -128px 0; }

table#example th a {
   display:block;
}

table#example th span {
   float: right;
}

Can I may be realize that with the z-index CSS-attribute or something like that?

---

Try adding float left to the anchor:

table#example th a {
   float: left;
   display:block;
}

---

Are you sure you want to be using tables for this? If you're using tables purely for layout; don't. There's a few ways to do this using css:

Method 1:

HTML

<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span> 

CSS

.link, .arrows  {
  float: left;
}

.link {
  margin: 0px 10px; /* Spacing either side of link */
}

Method 2

HTML

<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span> 

CSS

.link {
  display: inline;
  margin: 0px 10px; /* Spacing either side of link */
}

---

Change the CSS so that the <a> and <span> both float left:

table#example th a {
    float: left;
}

table#example th span {
    float: left;
}

Example here.