html - 使用渐变文本作为发光字母段落格式？ CSS 网络工具包

Question

我一直在努力解决为什么我的边距会在渐变文本的上方和下方出现。我想让我的渐变大小为 20 的文本与我的 12 点字体的答案文本共享同一行。我已按如下方式设置我的 CSS 和 html。

作为说明，粗体是渐变较大的文本

我有一个具体的问题？我有一个模糊的答案。

这两种文本样式在同一行上...而当我使用下面的代码时，我的渐变字体在下方和上方占据了很多空间以与较小的文本对齐。我试图 float 渐变字体。但后来我的渐变字体旁边有 3 行文本，它们不在同一行。

编辑:感谢您的建议。非常感激。这些肯定会修复两种字体不对齐的问题。如果我写的比一行文字多。文本现在需要返回以形成第二行的地方我仍然在第一行文本之间有这些大空间，其中包含渐变字母。和第二行文字。

我的 CSS

#faqone {
    position: relative;
    font-size: 20px;
    margin-bottom: 0px;
    font-family: 'EB Garamond', Serif;
    float: left;         
    }  

#faqone a {  
        text-decoration: none;  
        color: #4b82ff;
        position: absolute;  

        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
 from(rgba(0,0,0,255)), to(rgba(0,0,0,0)));  
    }  

#faqone:after {  
        content : 'A random Question?';  
        color: #202b71;  
    }  
.textmastP {
    font-family: 'EB Garamond', serif;
    font-size: 12pt;
    text-indent: 20px;
}

我的 HTML

   <div style=" width:721px; background: #fff; font-family: 'EB Garamond', serif;">
<p id="faqone"><a href=""> A random Question? </a></p>'
<p class="textmastP"> A specific answer: text breaks!</p>

Answer 1

为什么不全部简化呢？另外，是否需要 anchor 标记( <a> )？看起来它不会去任何地方，因为您希望问题的答案彼此一致。如果不需要，请将其切换为 <strong> .

http://jsfiddle.net/6bZbJ/

如果您要构建常见问题解答部分，我建议您使用无序列表 (<ul>) 或定义列表 (<dl>)。 http://www.w3.org/TR/REC-html40/struct/lists.html

HTML

<div id="faqs">
     <p>
          <a class="question" href="">A random Question?</a>
          A specific answer: text breaks!
     </p>
</div>

CSS

#faqs {
     font: 12pt/1.5 'EB Garamond', serif;
     color: #202b71;  
}
#faqs a {  
     color: #4b82ff;
     font-size: 20px;
     padding-right: 20px;  /* instead of text-indent */
     text-decoration: none;  
     -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,255)), to(rgba(0,0,0,0)));
    }