HTML和CSS：如何将引号和文本放在同一高度？

Can someone please show me how can I make a quotation like that (see the image)?

有人可以告诉我如何制作这样的报价(见图)?

I have used the default html code for the quotation symbol:

我使用了引号的默认html代码:

<div>
<span style="font-size=30px">$#8220;</span>
<span style="font-size=12px">Test Text</span>
</div>

But this causes the quotation mark to be stay on top of the text but not at the same height of the text. Can someone please help me with this?

但这会导致引号保留在文本的顶部,但不会保持在文本的相同高度。有人可以帮我这个吗?

4 个解决方案

#1

on the quote:

在报价上:

font-size: 30px;
display  : inline-block;
position : relative;
top      : 10px;

change the top: 10px to whatever you need to

改变顶部:10px到你需要的任何东西

#2

You will have to change the font to however you would like, but here it is in action: http://jsfiddle.net/Zm23t/

您将不得不将字体更改为您想要的,但在此处它正在运行:http://jsfiddle.net/Zm23t/

This is kind of a play on 'Drop Caps' used in newspapers.

这是报纸上使用的“Drop Caps”的一种戏剧。

#3

..............

Hi now used to pseudo css :before in css as like this

嗨现在用于伪css:在css之前就像这样

div span{
display:inline-block;
  width:200px;
  border:solid 1px red;
}
div span:before{
content:'"';
  font-size:14px;
  color:red;
  font-weight:bold;
}

Live demo

#4

You may try this.

你可以试试这个。

<div>
  <div style="float:left;">
    <span style="font-size:30px">"</span>
  </div>
  <div style="float:left;">
    <span style="font-size:12px">Test Text</span>
  </div>
</div>