Question

我正在通过我的onw学习CSS，并且已经花了几个小时在这上面，没有解决方案...

我需要在图像上放置文本，但同一行中有两个图像（内联块）。请看我的代码（例子）：

<html>
<head>
  <title>Test</title>
  <style type="text/css">
    .payrow { display:inline-block; width:100%; margin-bottom:14px; text-align:center; }
    .paybtn { display:inline-block; margin:0 10px 0 10px; text-align:center; }
    .paybtn img { width:250px; height:120px; margin:3px; border:0; filter:alpha(opacity=80); opacity:.80; }
    .paybtn a:hover img { filter:alpha(opacity=100); opacity:1; }
    .vtotal { font:bold 20px Arial, Helvetica, sans-serif; color:#7A7A7A; }
  </style>
</head>
<body>
  <div class="payrow">
    <div class="paybtn">
      <a href="pay.asp?d=1"><img src="paybtn1.gif" alt="PayPal1"></a>
      <div class="vtotal">Total: U$ 510.00</div>
    </div>
    <div class="paybtn">
      <a href="pay.asp?d=2"><img src="paybtn2.gif" alt="PayPal2"></a>
      <div class="vtotal">Total: U$ 580.00</div>
    </div>
  </div>
</body>
</html>

这是我的代码的结果：

enter image description here

这就是我真正想要的：

enter image description here

请有人能让我知道该怎么做吗？

谢谢！

Answer 1

您可以使用负边距

.vtotal { 
    font:bold 20px Arial, Helvetica, sans-serif; 
    color:#7A7A7A; 
    position:relative;
    margin-top:-40px; /*adjust the pixels accordingly*/
}

http://jsfiddle.net/gaby/5fxRf/

演示

如何将一些文本并排放在图像上（内联块）

1 个答案: