0

我一直在试图弄清楚为什么我的渐变文本上方和下方都有边距。我想让我的渐变大小为 20 的文本与我的答案文本共享同一行，字体为 12 磅。我已经按如下方式设置了我的 CSS 和 html。

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

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

这两种文本样式在同一行...而当我使用下面的代码时，我的渐变字体在下方和上方占据了很大的空间来与我较小的文本对齐。我试图浮动渐变字体。但后来我的渐变字体旁边有 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>
4

3 回答 3

0

我真的不知道你想做什么，但将两个文本放在同一行的最简单方法是使用.textmastP{ margin:6px }.

jsFiddle _

于 2013-07-25T21:29:26.883 回答
0

<p>这是因为你在第一个标签之后有那个小撇号。删除它，您现在将看到实际的高度差异。要将它们排列起来，将line-height值添加到 2nd<p>以补偿由于.textmastP类字体大小不同而导致的高度差异。这是小提琴

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

CSS：

div {
    width:721px;
    background: #fff;
    font-family:'EB Garamond', serif;
}
#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)));
    margin:0;
    padding:0;
}
#faqone:after {
    content :'A random Question?';
    color: #202b71;
}
.textmastP {
    font-family:'EB Garamond', serif;
    font-size: 12pt;
    text-indent: 20px;
    line-height:3.9;
}
于 2013-07-25T21:31:51.537 回答
0

为什么不简化这一切？另外，锚标签 ( <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)));
    }
于 2013-07-25T22:09:32.387 回答