在一行上链接图像

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

我可以通过z-index CSS属性或类似的东西意识到这一点吗？

Answer 1

尝试向锚点添加左侧浮动：

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

Answer 2

更改CSS，使<a>和<span>都向左浮动：

table#example th a {
    float: left;
}

table#example th span {
    float: left;
}

Example here

Answer 3

您确定要为此使用表格吗？如果你纯粹使用表格进行布局;别。使用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 */
}