Question

我使用此HTML代码

创建了一个取消幻灯片http://unslider.com/

<div class="un-slider" dir="rtl">
            <ul>
                <li>
                    <div class="span6">
                        <blockquote class="testimonial">
                            <p>Hello world i m arbaz mateen. like a little programmer.</p>
                        </blockquote>   
                        <div class="testimonial-arrow-down">&nbsp;</div>
                        <div class="testimonial-author">
                            <img src="" border="0" width="50" height="50">
                            <p><strong>Huzaifa Khalid</strong><br><span>BSCS Student at Iqra University</span></p>
                        </div>
                    </div>
                </li>
                <li class="flex-active-slide" style="width: 100%; float: left; display: block;">
                    <div class="span6">
                        <blockquote class="testimonial">
                            <p>MeriTaleem helped me find the right information at the right time. I was looking for admission updates and wanted to know the process of how to apply for admissions.</p>
                        </blockquote>   
                        <div class="testimonial-arrow-down">&nbsp;</div>
                        <div class="testimonial-author">
                            <img src="" border="0" width="50" height="50">
                            <p><strong>Huzaifa Khalid</strong><br><span>BSCS Student at Iqra University</span></p>
                        </div>
                    </div>
                </li>

我得到了这个结果

段看起来像这样

CSS

blockquote.testimonial {
background: rgba(177,227,172,0.9); 
color: #000;
font-family: Georgia, serif;
font-style: italic;
font-size: 1.2em;
line-height: 1.3;
width: 80%;
border-radius: 10px;
border: 0;
margin: auto;
padding: 10px 50px;
position: relative;
display: block;
}

blockquote.testimonial p {
margin: 15px;
width: 90%;
padding: 20px 50px 20px 20px;
}

blockquote.testimonial:before {
color: #000;
content: "\201C";
font-size: 80px;
font-style: normal;
padding-right: 15px;
float: left;
}

blockquote.testimonial:after {
content: "\201D";
color: #000;
font-size: 80px;
font-style: normal;
float: right;
margin-top: -60px;
}

我不知道<p>标记有什么问题。

Answer 1

它看起来是因为在您的html dir="rtl"中将其更改为ltr或只是将其删除

Answer 2

您的文档有权向左文本方向，这就是句子开头有点的原因。但是，您的引文是英文的，因此应该从左到右的文字方向。

要实现此功能，请将参数dir="ltr"添加到<blockquote> s。

<p> ... </p>在文字前显示句号

2 个答案: