1. ホーム
  2. 質問と答え
  3. ネストされたhtmlリスト内の異なるフォントサイズ

ネストされたhtmlリスト内の異なるフォントサイズ

2017-04-16 13 views
0

私のウェブサイトのCSSにはネストされたol,liリストクラスが作成されていますが、それぞれが異なるで表示されるミスがあります。私はそれにfont-sizeを定義しましたが。あなたがemを使用しているためだネストされたhtmlリスト内の異なるフォントサイズ

.number_list ol { 
     font:normal 1.2em 'Arial' ,Helvetica; 
     text-align:justify; 
    } 
.number_list li{ 
     list-style:decimal; 
     list-style-position:outside; 
     font-size:1.2em; 
    } 
    .number_list ol li{ 
     list-style:lower-alpha; 
     list-style-position:outside; 
     margin-right:5px; 
     font-size:1.2em; 
    } 
    .number_list ol li ol li { 
     list-style:lower-roman; 
     list-style-position:outside; 
     margin-right:5px; 
     margin-top:5px; 
     font-size:1.2em; 
    }

出典

2017-04-16 surabhi sanduja

答えて

0

、あなたの代わりにremを使用することができます。

emは、問題の要素の親に適用されるフォントのサイズに等しいです。代わりにremが要素のルートに適用されます。

この装置は、要素の計算font-sizeを表し、EM

MDNから。 font-sizeプロパティ自体で使用されている場合は、その要素の継承された font-sizeを表します。

このユニットは、ユーザーがフォントを のフォントに変更した場合でも、ページの垂直方向のリズムを維持するスケーラブルなレイアウトを作成するためによく使用されます。 CSSのプロパティline-height、font-size、margin-bottom およびmargin-topの値は、しばしばemで表されます。

REMは

このユニットルート要素のフォントサイズを表す（例えば<html>要素のfont-size）。この ルート要素のfont-sizeで使用すると、その初期値を表します。

このユニットは、完璧にスケーラブルなレイアウトを作成するのに実用的です。ターゲットとするブラウザでサポートされていない場合、このようなレイアウトはユニットを使用してemユニットを使用することができますが、これはやや複雑です。

 

.number_list ol { 
 
    font: normal 1.2rem 'Arial', Helvetica, text-align:justify; 
 
} 
 

 
.number_list li { 
 
    list-style: decimal; 
 
    list-style-position: outside; 
 
    font-size: 1.2rem; 
 
} 
 

 
.number_list ol li { 
 
    list-style: lower-alpha; 
 
    list-style-position: outside; 
 
    margin-right: 5px; 
 
    font-size: 1.2rem; 
 
} 
 

 
.number_list ol li ol li { 
 
    list-style: lower-roman; 
 
    list-style-position: outside; 
 
    margin-right: 5px; 
 
    margin-top: 5px; 
 
    font-size: 1.2rem; 
 
}
<div class="number_list"> 
 
    <ol> 
 
    <li>test a</li> 
 
    <li>test b</li> 
 
    <li>test c</li> 
 
    <li>test d 
 
     <ol> 
 
     <li>a</li> 
 
     <li>b</li> 
 
     <li>c</li> 
 
     <li>d</li> 
 
     </ol> 
 
    </li> 
 
    </ol> 
 
    <div>

出典

2017-04-16 16:20:35 dippas

-1

'間違いは、' あなたがemを使用していることです。

"em"（em）： "em"は、Webドキュメント メディアで使用されるスケーラブルな単位です。 emは現在のfont-sizeと同じです。たとえば、文書のfont-size が12pt、1emが12ptに等しい場合などです。 Emsは という性質上スケーラブルなので、2emは24ptに等しくなります.05emは6ptに等しくなります。 など スケーラビリティとモバイルデバイスに優しい性質のため、EmsはWebドキュメントでますます人気が高まっています。

から：http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/要するに

、あなたはその前のものよりも120％も大きい各サブ要素のフォントサイズを設定しています。 これを修正するには、絶対単位を使用してフォントサイズを設定するだけです（ptなど）。

あなたは、例えば、このCodePenを参照することができる：font-size宣言で使用https://codepen.io/masterdoctor/pen/GmJEbN?editors=1100

出典

2017-04-16 16:20:43 SamJakob

+0

なぜdownvoteですか？答えに何が間違っているか説明してください。 – SamJakob

0

emユニットは、親要素のフォントサイズを示しています。したがって、ネストされた要素のサイズを大きくしたり大きくしたりして、累積的にサイズを設定します。

要素全体で同じフォントサイズを使用するには、最も外側の要素のみに設定するだけです。これは、font:normal 1.2em 'Arial' ,Helvetica;ルールを維持し、に変更することです（ただし、他のCSSルールでサイズを設定する場合にのみ必要です）。

出典

2017-04-16 17:14:26

関連する問題

 関連する問題