0

グラデーションテキストの上下に余白ができる理由を整理しようとしています。グラデーション サイズ 20 のテキストを、12 ポイントのフォントで回答テキストと同じ行に共有したいと考えています。次のようにCSSとhtmlをセットアップしました。

例として、太字はグラデーションの大きいテキストです

具体的な質問がありますか? 私はあいまいな答えを持っています。

これらの 2 つのテキスト スタイルは同じ行にあります... 下のコードを使用すると、グラデーション フォントが上下に多くのスペースを占めて、小さなテキストに合わせてしまいます。グラデーションフォントを浮かせてみました。しかし、グラデーションフォントの横に3行のテキストがあり、同じ行を共有していません。

編集：提案していただきありがとうございます。とても有難い。これらは、2 つのフォントが並んでいないことを確実に修正します。1行以上のテキストを書く場合。2行目を形成するためにテキストを返す必要がある場所で、グラデーション文字を保持するテキストの最初の行の間にこれらの大きなスペースがまだ残っています。そして2行目のテキスト。

私の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

すべてを単純化してみませんか？また、アンカータグ ( <a>) も必要ですか? 質問への回答を互いに一致させたいので、どこにも行かないようです。必要ない場合は、 に切り替えてください<strong>。

http://jsfiddle.net/6bZbJ/

FAQ セクションを作成する場合は、順不同リスト ( <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 に答える
0

<p>これは、最初のタグの後に小さなアポストロフィがあるためです。それを取り除くと、実際の高さの違いがわかります。それらを並べるには、クラスごとに異なるフォントサイズによる高さの違いを補うためline-heightに、2 番目に値を追加します。ここにフィドルがあります<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

あなたが何をしたいのかよくわかりませんが、2 つのテキストを同じ行に配置する最も簡単な方法は、.textmastP{ margin:6px }.

jsFiddle _

于 2013-07-25T21:29:26.883 に答える