为什么这段文字不能正确对齐引号？

-1

我无法在引号之间保持段落的正方形。在Firefox中，引号之间的最后一行向左延伸得太远了。图像是我想要的样子。为什么这段文字不能正确对齐引号？

enter image description here

http://jsbin.com/elohej < - 这说明了什么问题正好在Firefox。

<html> 
<head> 
<meta charset="UTF-8" /> 
<style type="text/css"> 
/* Block Quote*/ 
#bqstyle{ 
    width: 650px; 
    margin:30px 0 0 230px; 
    border: solid 1px #000; 

} 

#bqstyle blockquote{ 
    font-size:24px; 
    height: 50px; 
    padding: 0 25px 50px 0; 

} 

.bqstart { 
    float: left; 
    font-size: 700%; 
    color: #605f5f; 
    height:25px; 
    margin-top: -40px; 
    padding-right: 5px; 
    padding-bottom: 100px; 
} 



.bqend { 
    float: right; 
    font-size: 700%; 
    color: #605f5f; 
    height: 35px; 
    margin-top: -35px; 
    margin-right:-40px; 
} 

/* END Block Quote*/ 
</style> 


</head> 

<div id="bqstyle"> 
<blockquote><p><span class="bqstart">&#8220;</span>Frank is the best. I take my Z to Hill&#8217;s for all my maintenance and car needs, and I&#8217;ll never take it to the dealership again. Better service. Better prices. <span class="bqend">&#8221;</span></p></blockquote> 
</div> 
<p> Test Paragraph Test ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest ParagraphTest Paragraph</p> 
</html>

来源

2011-11-19 Kelbizzle

你可以请一个jsfiddle或jsbin并发布一个链接？ – Connor

你能展示你想要完成的事情吗？ –

Jsbin显示问题。 http://jsbin.com/elohej – Kelbizzle

您可以通过绝对定位您的开盘报价而不是浮动它，并在您的p标签上添加填充 - 左边来实现此目的。

blockquote p { 
    padding-left: 80px; 
    position: relative; 
} 

.bqstart { 
    font-size: 700%; 
    color: #605f5f; 
    height:25px; 
    position: absolute; 
    left: 0; 
    top: 0; 
}

来源

2011-11-19 19:10:25 Leo

谢谢你亲切的先生 – Kelbizzle

为什么这段文字不能正确对齐引号？

回答

相关问题