html - href 中的 3 个跨度与 img 垂直对齐

Question

我确实有这样一个 div:

<div class="frontend-shop-cart-left">
   <a href="#">
      <img src="#" style=" display:inline; vertical-align: middle;height:60px; width:60px; " />
   </a>
   <a href="#">
      <span style="margin-left: 15px; font-size: 14px;" >1</span>
   </a>
</div>

文本垂直居中对齐，看起来不错。但是，如果我要在第二个 href 中添加两个跨度，则渲染效果很差。

看起来像这样:

|-------|
| image | 1
|       |
|-------| 
 2 3

但是我想要这个。

|-------|
| image | 1
|       | 2 3
|-------| 

我的html代码是这样的:

<div class="frontend-shop-cart-left">
   <a href="#">
      <img src="#" style=" display:inline; vertical-align: middle;height:60px; width:60px; " />
   </a>
   <a href="#">
      <span style="margin-left: 15px; font-size: 14px;" >1</span> <br/>
      <span style="margin-left: 15px; font-size: 14px;" >2</span>
      <span style="font-size: 14px;" >3</span>
   </a>
</div>

我的 CSS 有什么问题？

Answer 1

这是因为 anchor 标签不是 block 元素。您可以将 display:inline-block 添加到 anchor 标记，或者将第一个或两个 anchor 标记 float 到左侧。

在这里 fiddle :http://jsfiddle.net/qfx5xt0b/1/