Ссылка с изображением в одну строку

Question

Может кто-нибудь помочь мне привести стрелки и текст в одну строку?(см. изображение) Тег ссылки должен заполнять "th" (дисплей: блок).

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;
}

Можно ли понять, что это CSS-атрибут z-index или что-то в этом роде?

Answer 1

Измените CSS так, чтобы <a> и <span> оба плавали влево:

table#example th a {
    float: left;
}

table#example th span {
    float: left;
}

Пример здесь .

Answer 2

Вы уверены, что хотите использовать таблицы для этого?Если вы используете таблицы исключительно для разметки;нет.Есть несколько способов сделать это, используя css:

Метод 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 */
}

Метод 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 */
}

Answer 3

Попробуйте добавить float left к якору:

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