私のリストに最初の箇条書きを生成した順序付きリスト

-1

私は自分のページの単純な順序付きリストを作成しようとしています。何らかの理由で私のページのリストに最初の箇条書きしか表示されていない。下のHTMLとCSSコードは、何か助けてくれてありがとう！私のリストに最初の箇条書きを生成した順序付きリスト

HTML：

{% extends "personal/header.html" %} 
{% block content %} 



<br> 
<br> 

<div class='font1' align='left' style='font-size: 16px'> 
<p>Quote</p> 
<hr> 
</div> 



<div> 
<ol> 
    <li>Line Item 1</li> 
    <li>Line Item 2</li> 
</ol> 
<div> 





<!--{% include "personal/includes/htmlsnippet.html" %}--> 
{% endblock %}

CSS： @importのURL（ 'https://fonts.googleapis.com/css?family=Rock+Salt'）; @import url（ 'https://fonts.googleapis.com/css?family=Open+Sans'）;

p { 
    font-family: 'Rock Salt', cursive; 
} 


.opensans { 
    font-family: 'Open Sans', sans-serif; 
} 

ol{ 
    list-style-type: circle; 
    /* Let the element behave like a <li> element */ 
    display:list-item; 
    font-family: 'Open Sans', sans-serif; 
    color: black; 
    padding: 0px 0px; 
    margin: 50px; 


} 



.name{ 
color: #3d3d70; 
} 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 2.5px solid black; 
    margin: 1em 0; 
    padding: 0; 
    width: 90%; 

} 

table { 

    border: 4px solid white; 
} 


/* Navigation Bar */ 

ul { 
    font-family: 'Rock Salt', cursive; 
    /* removes bullets */list-style-type: none; 
    /* removes browser default settings */ margin: 0; 
    background-color: 'white'; 
    text-align: center; 




} 


li { 
    /* to get block elements to slide next to each other */ 

    display: inline-block; 


} 

li a { 
    /* displays links as whole link area clickable blocks, can then specify padding (heigh, width, margins, etc) */ 
    display: inline-block; 
    /* down, over*/ 
    padding: 20px 35px; 
    background-color: 'white'; 
    text-decoration: none; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 16px; 
    font-size: 1.25vw; 
    font-weight: bold; 
    color: black; 
    display: inline-block; 

} 

li a:hover { 
    /*color when hover over bar*/ 
    color: #8989dc; 
    /* no underline when hovering over */ 
    text-decoration: none !important; 
    font-family: 'Rock Salt', cursive; 
    font-size: 16px; 
    font-size: 1.35vw; 
    display: inline-block; 

} 

.active { 
    /* to let user know which tab currently on */ 
    background-color: #8989dc; 
    font-family: 'Rock Salt', cursive; 
}

出典

2017-02-25 Phum

私のために正常に動作し -

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
      <style type="text/css"> 
 
      ol{ 
 
    list-style-type: circle; 
 
    /* Let the element behave like a <li> element */ 
 
    display:list-item; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: black; 
 
    padding: 0px 0px; 
 
    margin: 50px; 
 

 

 
} 
 
      </style> 
 
      </head> 
 
      <body> 
 
     <div> 
 
<ol> 
 
    <li>Line Item 1</li> 
 
    <li>Line Item 2</li> 
 
</ol> 
 
<div> 
 
      </body>

出典

2017-02-25 15:52:14 neophyte

私はうまくいきません。 – Phum

スタイルシートを正しく追加していますか？html自体のCSSを「」と「」タグの間に追加してみてください – neophyte

<ol>命じリスト、リスト項目の前に自動増加番号を置く、すなわち1であります。ここでlist-style-type: circle;を使用することは実際には意味がありません。あなたは無秩序のリストを望んでいるようです - <ul>？

出典

2017-03-02 14:59:07 Johannes

私のリストに最初の箇条書きを生成した順序付きリスト

答えて

関連する問題