Question

我正在尝试使用如下所示的列表创建一天的事件列表。

我想以图片中的列表形式显示小时数，然后突出显示备用小时。我无法让圆点与边框完美对齐

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>

任何有关如何解决此问题的提示都将受到赞赏，以及有关如何在第二个列表中绘制各种条形的任何信息。对不起，这不是我能提供的最好的例子。

Answer 1

我删除了一些并非必需的属性。我希望这会对你有帮助。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在备用列表元素上列出子弹样式点。

1 个答案: