代替リスト要素に箇条書きの点を含むリスト。

Question

次のようなリストを使用して、1日分のイベントのリストを作成しようとしています。

私は画像のようにリスト形式で時間を表示して代替時間を強調したいです。私は、内部の様々なバーを描画する方法についても任意の情報をいただければ幸い国境

body { 
 
    background: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
ul { 
 
       flex-direction:column; 
 
       display: flex; 
 
       padding-left:0; 
 
       
 
      } 
 
      li { 
 
       list-style: none; 
 
       color: #9E9E9E; 
 
       height:24px; 
 
       line-height:24px; 
 
       font-weight:200; 
 
       display: flex; 
 
       flex-direction:row; 
 
      } 
 
      li:nth-child(odd) .ring { 
 
       height: 6px; 
 
       width: 6px; 
 
       -webkit-border-radius: 100%; 
 
       -moz-border-radius: 100%; 
 
       border-radius: 100%; 
 
       line-height: 23px; 
 
       background: #cecece; 
 
       margin-top: 9px; 
 
       margin-left: 9px; 
 
      } 
 
      
 
      #events ul { 
 
       flex-direction:column; 
 
       display: flex; 
 
       padding-left:0; 
 
       margin-top:0; 
 
      } 
 

 
      #events li { 
 
       list-style: none; 
 
       color: #9E9E9E; 
 
       height:25px; 
 
       width: 48px; 
 
       line-height:25px; 
 
       font-weight:200; 
 
       display: flex; 
 
       border-bottom: 1px solid #cecece; 
 
       flex-direction:row; 
 
      }

<ul class="labels"> 
 
       
 
        <li><span>00:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>01:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>02:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>03:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>04:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>05:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>06:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>07:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>08:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>09:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>10:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>11:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>12:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>13:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>14:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>15:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>16:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>17:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>18:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>19:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>20:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>21:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>22:00</span> <span class="ring"></span></li> 
 
       
 
        <li><span>23:00</span> <span class="ring"></span></li> 
 
       <dom-repeat as="hour"><template></template></dom-repeat> 
 
      </ul> 
 
      <ul id="events"> 
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        
 
         <li> 
 
          <dom-repeat as="event"><template></template></dom-repeat> 
 
         </li> 
 
        <dom-repeat as="hour"><template></template></dom-repeat> 
 
       </ul>

これを解決する方法上の任意のヒントをと完全に整合するようにドットを取得することはできませんよ2番目のリスト。申し訳ありませんが、私が提供できる最高の例ではありません。

Answer 1

私は、必要ではないすべてのプロパティを削除しました。私はこれがあなたを助けることを仰いだ。私のために仕事をしてくれた

body { 
 
    background: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
ul { 
 
    flex-direction: column; 
 
    display: flex; 
 
    padding-left: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    color: #9E9E9E; 
 
    height: 24px; 
 
    line-height: 24px; 
 
    font-weight: 200; 
 
    position: relative; 
 
    padding-right: 10px; 
 
} 
 

 
li:nth-child(odd) .ring { 
 
    height: 6px; 
 
    width: 6px; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    border-radius: 100%; 
 
    line-height: 23px; 
 
    background: #cecece; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 7px; 
 
} 
 

 
#events ul { 
 
    flex-direction: column; 
 
    display: flex; 
 
    padding-left: 0; 
 
    margin-top: 0; 
 
} 
 

 
#events li { 
 
    list-style: none; 
 
    color: #9E9E9E; 
 
    height: 24px; 
 
    width: 48px; 
 
    line-height: 24px; 
 
    font-weight: 200; 
 
} 
 

 
#events li:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border-bottom: 1px solid #cecece; 
 
    width: 56px; 
 
    height: 10px; 
 
}

<ul class="labels"> 
 

 
    <li><span>00:00</span> <span class="ring"></span></li> 
 

 
    <li><span>01:00</span> <span class="ring"></span></li> 
 

 
    <li><span>02:00</span> <span class="ring"></span></li> 
 

 
    <li><span>03:00</span> <span class="ring"></span></li> 
 

 
    <li><span>04:00</span> <span class="ring"></span></li> 
 

 
    <li><span>05:00</span> <span class="ring"></span></li> 
 

 
    <li><span>06:00</span> <span class="ring"></span></li> 
 

 
    <li><span>07:00</span> <span class="ring"></span></li> 
 

 
    <li><span>08:00</span> <span class="ring"></span></li> 
 

 
    <li><span>09:00</span> <span class="ring"></span></li> 
 

 
    <li><span>10:00</span> <span class="ring"></span></li> 
 

 
    <li><span>11:00</span> <span class="ring"></span></li> 
 

 
    <li><span>12:00</span> <span class="ring"></span></li> 
 

 
    <li><span>13:00</span> <span class="ring"></span></li> 
 

 
    <li><span>14:00</span> <span class="ring"></span></li> 
 

 
    <li><span>15:00</span> <span class="ring"></span></li> 
 

 
    <li><span>16:00</span> <span class="ring"></span></li> 
 

 
    <li><span>17:00</span> <span class="ring"></span></li> 
 

 
    <li><span>18:00</span> <span class="ring"></span></li> 
 

 
    <li><span>19:00</span> <span class="ring"></span></li> 
 

 
    <li><span>20:00</span> <span class="ring"></span></li> 
 

 
    <li><span>21:00</span> <span class="ring"></span></li> 
 

 
    <li><span>22:00</span> <span class="ring"></span></li> 
 

 
    <li><span>23:00</span> <span class="ring"></span></li> 
 
    <dom-repeat as="hour"><template></template></dom-repeat> 
 
</ul> 
 
<ul id="events"> 
 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 

 
    <li> 
 
    <dom-repeat as="event"><template></template></dom-repeat> 
 
    </li> 
 
    <dom-repeat as="hour"><template></template></dom-repeat> 
 
</ul>