我如何使这个Flex框CSS间隙均匀?

7fhtutme  于 2023-04-01  发布在  其他
关注(0)|答案(4)|浏览(111)

我不认为我想看到CSS网格,因为我想它的弹性多列,如果视口扩大,例如肖像-〉风景在移动终端上。
这就是问题所在:

(()=>{function m(n,a){if(n){var r=a/1e3;Math.abs(r)>60?n.innerHTML=parseInt(r/60)+"m":n.innerHTML=parseInt(r)+"s",setTimeout(m,1e3,n,a-1e3)}}window.addEventListener("load",function(){var n=document.getElementsByTagName("time"),a=new Date;for(let e=0;e<n.length;e++){var r=new Date(n[e].getAttribute("datetime")),v=r.getTime()-a.getTime();m(n[e],v)}var p=document.getElementById("lastupdated");m(p,Date.now()-a);var t=JSON.parse(window.localStorage.getItem("history"))||{},o=document.getElementById("id").value,l=document.getElementById("namedBusStop")?.innerHTML||"";if(console.log("DEBUG",o,l),o){typeof t[o]>"u"&&(t[o]={},t[o].count=0,t[o].name=l);try{t[o].count++,t[o].name=l}catch(e){console.log(e)}window.localStorage.setItem("history",JSON.stringify(t))}else navigator.geolocation&&navigator.geolocation.getCurrentPosition(function(e){var u=e.coords.latitude,w=e.coords.longitude;window.location="/closest?lat="+u+"&lng="+w});var d=[];for(var g in t)d.push([g,t[g]]);d.sort(function(e,u){return e[1].count-u[1].count});var h=document.getElementById("stations");for(let e=d.length-1;e>=0;e--){var s=d[e][0],c=d[e][1],f=document.createElement("li"),i=document.createElement("a");c.name?(i.setAttribute("href","/?id="+s+"&name="+encodeURI(c.name)),i.appendChild(document.createTextNode(s+" "+c.name+" ("+c.count+")"))):(i.setAttribute("href","/?id="+s),i.appendChild(document.createTextNode(s))),f.appendChild(i),h.appendChild(f)}},!1);})();
.buses li:before {
  content: "\1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

ul.buses {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
<ul class=buses>

    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/155'>155</a>
        </strong>

        <time dateTime="2023-03-19T20:19:31&#43;08:00">2023-03-19T20:19:31&#43;08:00</time>
        <time dateTime="2023-03-19T20:37:34&#43;08:00">2023-03-19T20:37:34&#43;08:00</time>
        <time dateTime="2023-03-19T20:50:38&#43;08:00">2023-03-19T20:50:38&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/24'>24</a>
        </strong>

        <time dateTime="2023-03-19T20:19:55&#43;08:00">2023-03-19T20:19:55&#43;08:00</time>
        <time dateTime="2023-03-19T20:53:17&#43;08:00">2023-03-19T20:53:17&#43;08:00</time>
        <time dateTime="2023-03-19T20:54:15&#43;08:00">2023-03-19T20:54:15&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/21'>21</a>
        </strong>

        <time dateTime="2023-03-19T20:20:44&#43;08:00">2023-03-19T20:20:44&#43;08:00</time>
        <time dateTime="2023-03-19T20:35:07&#43;08:00">2023-03-19T20:35:07&#43;08:00</time>
        <time dateTime="2023-03-19T20:49:38&#43;08:00">2023-03-19T20:49:38&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/13'>13</a>
        </strong>

        <time dateTime="2023-03-19T20:20:48&#43;08:00">2023-03-19T20:20:48&#43;08:00</time>
        <time dateTime="2023-03-19T20:30:31&#43;08:00">2023-03-19T20:30:31&#43;08:00</time>
        <time dateTime="2023-03-19T20:45:41&#43;08:00">2023-03-19T20:45:41&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/67'>67</a>
        </strong>

        <time dateTime="2023-03-19T20:22:24&#43;08:00">2023-03-19T20:22:24&#43;08:00</time>
        <time dateTime="2023-03-19T20:25:35&#43;08:00">2023-03-19T20:25:35&#43;08:00</time>
        <time dateTime="2023-03-19T20:27:59&#43;08:00">2023-03-19T20:27:59&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/7'>7</a>
        </strong>

        <time dateTime="2023-03-19T20:22:26&#43;08:00">2023-03-19T20:22:26&#43;08:00</time>
        <time dateTime="2023-03-19T20:31:30&#43;08:00">2023-03-19T20:31:30&#43;08:00</time>
        <time dateTime="2023-03-19T20:45:46&#43;08:00">2023-03-19T20:45:46&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/28'>28</a>
        </strong>

        <time dateTime="2023-03-19T20:22:48&#43;08:00">2023-03-19T20:22:48&#43;08:00</time>
        <time dateTime="2023-03-19T20:38:45&#43;08:00">2023-03-19T20:38:45&#43;08:00</time>
        <time dateTime="2023-03-19T20:50:09&#43;08:00">2023-03-19T20:50:09&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/30'>30</a>
        </strong>

        <time dateTime="2023-03-19T20:25:57&#43;08:00">2023-03-19T20:25:57&#43;08:00</time>
        <time dateTime="2023-03-19T20:38:32&#43;08:00">2023-03-19T20:38:32&#43;08:00</time>
        <time dateTime="2023-03-19T20:53:32&#43;08:00">2023-03-19T20:53:32&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/93'>93</a>
        </strong>

        <time dateTime="2023-03-19T20:27:43&#43;08:00">2023-03-19T20:27:43&#43;08:00</time>
        <time dateTime="2023-03-19T20:55:32&#43;08:00">2023-03-19T20:55:32&#43;08:00</time>

    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/2'>2</a>
        </strong>

        <time dateTime="2023-03-19T20:30:14&#43;08:00">2023-03-19T20:30:14&#43;08:00</time>
        <time dateTime="2023-03-19T20:39:08&#43;08:00">2023-03-19T20:39:08&#43;08:00</time>
        <time dateTime="2023-03-19T20:39:16&#43;08:00">2023-03-19T20:39:16&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/51'>51</a>
        </strong>

        <time dateTime="2023-03-19T20:30:19&#43;08:00">2023-03-19T20:30:19&#43;08:00</time>
        <time dateTime="2023-03-19T20:36:15&#43;08:00">2023-03-19T20:36:15&#43;08:00</time>
        <time dateTime="2023-03-19T20:44:24&#43;08:00">2023-03-19T20:44:24&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/150'>150</a>
        </strong>

        <time dateTime="2023-03-19T20:30:40&#43;08:00">2023-03-19T20:30:40&#43;08:00</time>
        <time dateTime="2023-03-19T20:50:54&#43;08:00">2023-03-19T20:50:54&#43;08:00</time>

    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/60'>60</a>
        </strong>

        <time dateTime="2023-03-19T20:31:03&#43;08:00">2023-03-19T20:31:03&#43;08:00</time>
        <time dateTime="2023-03-19T20:42:10&#43;08:00">2023-03-19T20:42:10&#43;08:00</time>
        <time dateTime="2023-03-19T20:57:53&#43;08:00">2023-03-19T20:57:53&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/26'>26</a>
        </strong>

        <time dateTime="2023-03-19T20:31:06&#43;08:00">2023-03-19T20:31:06&#43;08:00</time>
        <time dateTime="2023-03-19T20:42:32&#43;08:00">2023-03-19T20:42:32&#43;08:00</time>
        <time dateTime="2023-03-19T20:56:32&#43;08:00">2023-03-19T20:56:32&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/63'>63</a>
        </strong>

        <time dateTime="2023-03-19T20:32:56&#43;08:00">2023-03-19T20:32:56&#43;08:00</time>
        <time dateTime="2023-03-19T20:43:32&#43;08:00">2023-03-19T20:43:32&#43;08:00</time>
        <time dateTime="2023-03-19T20:59:15&#43;08:00">2023-03-19T20:59:15&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/61'>61</a>
        </strong>

        <time dateTime="2023-03-19T20:35:28&#43;08:00">2023-03-19T20:35:28&#43;08:00</time>
        <time dateTime="2023-03-19T20:43:51&#43;08:00">2023-03-19T20:43:51&#43;08:00</time>
        <time dateTime="2023-03-19T20:55:03&#43;08:00">2023-03-19T20:55:03&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/63M'>63M</a>
        </strong>

        <time dateTime="2023-03-19T20:36:45&#43;08:00">2023-03-19T20:36:45&#43;08:00</time>
        <time dateTime="2023-03-19T20:43:03&#43;08:00">2023-03-19T20:43:03&#43;08:00</time>
        <time dateTime="2023-03-19T20:51:48&#43;08:00">2023-03-19T20:51:48&#43;08:00</time>
    </li>
    <li>
        <strong>
            <a href='https://busrouter.sg/#/services/22'>22</a>
        </strong>

        <time dateTime="2023-03-19T20:37:51&#43;08:00">2023-03-19T20:37:51&#43;08:00</time>
        <time dateTime="2023-03-19T20:58:13&#43;08:00">2023-03-19T20:58:13&#43;08:00</time>
    </li>
</ul>

<p>Hint: Tap <a style="text-decoration: none;" href="/">🚏</a> to find closest bus stop</p>

<h4>Last updated: <span id=lastupdated></span></h4>
1l5u6lss

1l5u6lss1#

尝试宽度:50%;对于li标签,如下所示:

.buses li:before {
  content: "\1F68C";
  padding-left: 20px;
  padding-right: 8px;
  overflow: hidden;
}

ul.buses {
    list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

li {
  width: 50%;
}
<script src="https://bus.dabase.com/static/main.js"></script>
    <ul class=buses>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/155'>155</a>
            </strong>

            <time dateTime="2023-03-19T20:19:31&#43;08:00">2023-03-19T20:19:31&#43;08:00</time>
            <time dateTime="2023-03-19T20:37:34&#43;08:00">2023-03-19T20:37:34&#43;08:00</time>
            <time dateTime="2023-03-19T20:50:38&#43;08:00">2023-03-19T20:50:38&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/24'>24</a>
            </strong>

            <time dateTime="2023-03-19T20:19:55&#43;08:00">2023-03-19T20:19:55&#43;08:00</time>
            <time dateTime="2023-03-19T20:53:17&#43;08:00">2023-03-19T20:53:17&#43;08:00</time>
            <time dateTime="2023-03-19T20:54:15&#43;08:00">2023-03-19T20:54:15&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/21'>21</a>
            </strong>

            <time dateTime="2023-03-19T20:20:44&#43;08:00">2023-03-19T20:20:44&#43;08:00</time>
            <time dateTime="2023-03-19T20:35:07&#43;08:00">2023-03-19T20:35:07&#43;08:00</time>
            <time dateTime="2023-03-19T20:49:38&#43;08:00">2023-03-19T20:49:38&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/13'>13</a>
            </strong>

            <time dateTime="2023-03-19T20:20:48&#43;08:00">2023-03-19T20:20:48&#43;08:00</time>
            <time dateTime="2023-03-19T20:30:31&#43;08:00">2023-03-19T20:30:31&#43;08:00</time>
            <time dateTime="2023-03-19T20:45:41&#43;08:00">2023-03-19T20:45:41&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/67'>67</a>
            </strong>

            <time dateTime="2023-03-19T20:22:24&#43;08:00">2023-03-19T20:22:24&#43;08:00</time>
            <time dateTime="2023-03-19T20:25:35&#43;08:00">2023-03-19T20:25:35&#43;08:00</time>
            <time dateTime="2023-03-19T20:27:59&#43;08:00">2023-03-19T20:27:59&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/7'>7</a>
            </strong>

            <time dateTime="2023-03-19T20:22:26&#43;08:00">2023-03-19T20:22:26&#43;08:00</time>
            <time dateTime="2023-03-19T20:31:30&#43;08:00">2023-03-19T20:31:30&#43;08:00</time>
            <time dateTime="2023-03-19T20:45:46&#43;08:00">2023-03-19T20:45:46&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/28'>28</a>
            </strong>

            <time dateTime="2023-03-19T20:22:48&#43;08:00">2023-03-19T20:22:48&#43;08:00</time>
            <time dateTime="2023-03-19T20:38:45&#43;08:00">2023-03-19T20:38:45&#43;08:00</time>
            <time dateTime="2023-03-19T20:50:09&#43;08:00">2023-03-19T20:50:09&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/30'>30</a>
            </strong>

            <time dateTime="2023-03-19T20:25:57&#43;08:00">2023-03-19T20:25:57&#43;08:00</time>
            <time dateTime="2023-03-19T20:38:32&#43;08:00">2023-03-19T20:38:32&#43;08:00</time>
            <time dateTime="2023-03-19T20:53:32&#43;08:00">2023-03-19T20:53:32&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/93'>93</a>
            </strong>

            <time dateTime="2023-03-19T20:27:43&#43;08:00">2023-03-19T20:27:43&#43;08:00</time>
            <time dateTime="2023-03-19T20:55:32&#43;08:00">2023-03-19T20:55:32&#43;08:00</time>
            

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/2'>2</a>
            </strong>

            <time dateTime="2023-03-19T20:30:14&#43;08:00">2023-03-19T20:30:14&#43;08:00</time>
            <time dateTime="2023-03-19T20:39:08&#43;08:00">2023-03-19T20:39:08&#43;08:00</time>
            <time dateTime="2023-03-19T20:39:16&#43;08:00">2023-03-19T20:39:16&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/51'>51</a>
            </strong>

            <time dateTime="2023-03-19T20:30:19&#43;08:00">2023-03-19T20:30:19&#43;08:00</time>
            <time dateTime="2023-03-19T20:36:15&#43;08:00">2023-03-19T20:36:15&#43;08:00</time>
            <time dateTime="2023-03-19T20:44:24&#43;08:00">2023-03-19T20:44:24&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/150'>150</a>
            </strong>

            <time dateTime="2023-03-19T20:30:40&#43;08:00">2023-03-19T20:30:40&#43;08:00</time>
            <time dateTime="2023-03-19T20:50:54&#43;08:00">2023-03-19T20:50:54&#43;08:00</time>
            

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/60'>60</a>
            </strong>

            <time dateTime="2023-03-19T20:31:03&#43;08:00">2023-03-19T20:31:03&#43;08:00</time>
            <time dateTime="2023-03-19T20:42:10&#43;08:00">2023-03-19T20:42:10&#43;08:00</time>
            <time dateTime="2023-03-19T20:57:53&#43;08:00">2023-03-19T20:57:53&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/26'>26</a>
            </strong>

            <time dateTime="2023-03-19T20:31:06&#43;08:00">2023-03-19T20:31:06&#43;08:00</time>
            <time dateTime="2023-03-19T20:42:32&#43;08:00">2023-03-19T20:42:32&#43;08:00</time>
            <time dateTime="2023-03-19T20:56:32&#43;08:00">2023-03-19T20:56:32&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/63'>63</a>
            </strong>

            <time dateTime="2023-03-19T20:32:56&#43;08:00">2023-03-19T20:32:56&#43;08:00</time>
            <time dateTime="2023-03-19T20:43:32&#43;08:00">2023-03-19T20:43:32&#43;08:00</time>
            <time dateTime="2023-03-19T20:59:15&#43;08:00">2023-03-19T20:59:15&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/61'>61</a>
            </strong>

            <time dateTime="2023-03-19T20:35:28&#43;08:00">2023-03-19T20:35:28&#43;08:00</time>
            <time dateTime="2023-03-19T20:43:51&#43;08:00">2023-03-19T20:43:51&#43;08:00</time>
            <time dateTime="2023-03-19T20:55:03&#43;08:00">2023-03-19T20:55:03&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/63M'>63M</a>
            </strong>

            <time dateTime="2023-03-19T20:36:45&#43;08:00">2023-03-19T20:36:45&#43;08:00</time>
            <time dateTime="2023-03-19T20:43:03&#43;08:00">2023-03-19T20:43:03&#43;08:00</time>
            <time dateTime="2023-03-19T20:51:48&#43;08:00">2023-03-19T20:51:48&#43;08:00</time>

        </li>
        
        <li>
            <strong>
                <a href='https://busrouter.sg/#/services/22'>22</a>
            </strong>

            <time dateTime="2023-03-19T20:37:51&#43;08:00">2023-03-19T20:37:51&#43;08:00</time>
            <time dateTime="2023-03-19T20:58:13&#43;08:00">2023-03-19T20:58:13&#43;08:00</time>
            

        </li>
        
    </ul>

    <p>Hint: Tap <a style="text-decoration: none;" href="/">🚏</a> to find closest bus stop</p>

    <h4>Last updated: <span id=lastupdated></span></h4>
cnh2zyt3

cnh2zyt32#

看起来你试图防止li元素在同一行上容纳尽可能多的元素时换行。如果是这样的话,你可以为li硬编码一个最大限制:

li {
  width: max(300px, 20%);
  white-space: nowrap;
}

试试看:
x一个一个一个一个x一个一个二个一个x一个一个三个一个

emeijp43

emeijp433#

您可以通过添加li标签建议的@media查询规则来针对不同的屏幕大小:您可以对这些类型的数据使用表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->

  <title>Document</title>
</head>
<style>
  li {
    width: 100%;
  }
  
  @media only screen and (max-width: 480px) {
    li {
      width: 100%;
    }
  }
  
  @media only screen and (min-width: 768px) {
    li {
      width: 50%;
    }
  }
  
  .buses li:before {
    content: "\1F68C";
    padding-left: 20px;
    padding-right: 8px;
    overflow: hidden;
  }
  
  ul.buses {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
</style>

<body>
  <nav class="flex justify-center space-x-4">
    <a href="/dashboard" class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Home</a
      >
      <a
        href="/team"
        class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900"
        >Team</a
      >
      <a
        href="/projects"
        class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900"
        >Projects</a
      >
      <a
        href="/reports"
        class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900"
        >Reports</a
      >
    </nav>

    <script src="https://bus.dabase.com/static/main.js"></script>
    <ul class="buses">

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/155">155</a>
    </strong>

    <time datetime="2023-03-19T20:19:31&#43;08:00">2023-03-19T20:19:31&#43;08:00</time
        >
        <time datetime="2023-03-19T20:37:34&#43;08:00"
          >2023-03-19T20:37:34&#43;08:00</time
        >
        <time datetime="2023-03-19T20:50:38&#43;08:00"
          >2023-03-19T20:50:38&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/24">24</a>
        </strong>

        <time datetime="2023-03-19T20:19:55&#43;08:00"
          >2023-03-19T20:19:55&#43;08:00</time
        >
        <time datetime="2023-03-19T20:53:17&#43;08:00"
          >2023-03-19T20:53:17&#43;08:00</time
        >
        <time datetime="2023-03-19T20:54:15&#43;08:00"
          >2023-03-19T20:54:15&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/21">21</a>
        </strong>

        <time datetime="2023-03-19T20:20:44&#43;08:00"
          >2023-03-19T20:20:44&#43;08:00</time
        >
        <time datetime="2023-03-19T20:35:07&#43;08:00"
          >2023-03-19T20:35:07&#43;08:00</time
        >
        <time datetime="2023-03-19T20:49:38&#43;08:00"
          >2023-03-19T20:49:38&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/13">13</a>
        </strong>

        <time datetime="2023-03-19T20:20:48&#43;08:00"
          >2023-03-19T20:20:48&#43;08:00</time
        >
        <time datetime="2023-03-19T20:30:31&#43;08:00"
          >2023-03-19T20:30:31&#43;08:00</time
        >
        <time datetime="2023-03-19T20:45:41&#43;08:00"
          >2023-03-19T20:45:41&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/67">67</a>
        </strong>

        <time datetime="2023-03-19T20:22:24&#43;08:00"
          >2023-03-19T20:22:24&#43;08:00</time
        >
        <time datetime="2023-03-19T20:25:35&#43;08:00"
          >2023-03-19T20:25:35&#43;08:00</time
        >
        <time datetime="2023-03-19T20:27:59&#43;08:00"
          >2023-03-19T20:27:59&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/7">7</a>
        </strong>

        <time datetime="2023-03-19T20:22:26&#43;08:00"
          >2023-03-19T20:22:26&#43;08:00</time
        >
        <time datetime="2023-03-19T20:31:30&#43;08:00"
          >2023-03-19T20:31:30&#43;08:00</time
        >
        <time datetime="2023-03-19T20:45:46&#43;08:00"
          >2023-03-19T20:45:46&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/28">28</a>
        </strong>

        <time datetime="2023-03-19T20:22:48&#43;08:00"
          >2023-03-19T20:22:48&#43;08:00</time
        >
        <time datetime="2023-03-19T20:38:45&#43;08:00"
          >2023-03-19T20:38:45&#43;08:00</time
        >
        <time datetime="2023-03-19T20:50:09&#43;08:00"
          >2023-03-19T20:50:09&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/30">30</a>
        </strong>

        <time datetime="2023-03-19T20:25:57&#43;08:00"
          >2023-03-19T20:25:57&#43;08:00</time
        >
        <time datetime="2023-03-19T20:38:32&#43;08:00"
          >2023-03-19T20:38:32&#43;08:00</time
        >
        <time datetime="2023-03-19T20:53:32&#43;08:00"
          >2023-03-19T20:53:32&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/93">93</a>
        </strong>

        <time datetime="2023-03-19T20:27:43&#43;08:00"
          >2023-03-19T20:27:43&#43;08:00</time
        >
        <time datetime="2023-03-19T20:55:32&#43;08:00"
          >2023-03-19T20:55:32&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/2">2</a>
        </strong>

        <time datetime="2023-03-19T20:30:14&#43;08:00"
          >2023-03-19T20:30:14&#43;08:00</time
        >
        <time datetime="2023-03-19T20:39:08&#43;08:00"
          >2023-03-19T20:39:08&#43;08:00</time
        >
        <time datetime="2023-03-19T20:39:16&#43;08:00"
          >2023-03-19T20:39:16&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/51">51</a>
        </strong>

        <time datetime="2023-03-19T20:30:19&#43;08:00"
          >2023-03-19T20:30:19&#43;08:00</time
        >
        <time datetime="2023-03-19T20:36:15&#43;08:00"
          >2023-03-19T20:36:15&#43;08:00</time
        >
        <time datetime="2023-03-19T20:44:24&#43;08:00"
          >2023-03-19T20:44:24&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/150">150</a>
        </strong>

        <time datetime="2023-03-19T20:30:40&#43;08:00"
          >2023-03-19T20:30:40&#43;08:00</time
        >
        <time datetime="2023-03-19T20:50:54&#43;08:00"
          >2023-03-19T20:50:54&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/60">60</a>
        </strong>

        <time datetime="2023-03-19T20:31:03&#43;08:00"
          >2023-03-19T20:31:03&#43;08:00</time
        >
        <time datetime="2023-03-19T20:42:10&#43;08:00"
          >2023-03-19T20:42:10&#43;08:00</time
        >
        <time datetime="2023-03-19T20:57:53&#43;08:00"
          >2023-03-19T20:57:53&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/26">26</a>
        </strong>

        <time datetime="2023-03-19T20:31:06&#43;08:00"
          >2023-03-19T20:31:06&#43;08:00</time
        >
        <time datetime="2023-03-19T20:42:32&#43;08:00"
          >2023-03-19T20:42:32&#43;08:00</time
        >
        <time datetime="2023-03-19T20:56:32&#43;08:00"
          >2023-03-19T20:56:32&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/63">63</a>
        </strong>

        <time datetime="2023-03-19T20:32:56&#43;08:00"
          >2023-03-19T20:32:56&#43;08:00</time
        >
        <time datetime="2023-03-19T20:43:32&#43;08:00"
          >2023-03-19T20:43:32&#43;08:00</time
        >
        <time datetime="2023-03-19T20:59:15&#43;08:00"
          >2023-03-19T20:59:15&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/61">61</a>
        </strong>

        <time datetime="2023-03-19T20:35:28&#43;08:00"
          >2023-03-19T20:35:28&#43;08:00</time
        >
        <time datetime="2023-03-19T20:43:51&#43;08:00"
          >2023-03-19T20:43:51&#43;08:00</time
        >
        <time datetime="2023-03-19T20:55:03&#43;08:00"
          >2023-03-19T20:55:03&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/63M">63M</a>
        </strong>

        <time datetime="2023-03-19T20:36:45&#43;08:00"
          >2023-03-19T20:36:45&#43;08:00</time
        >
        <time datetime="2023-03-19T20:43:03&#43;08:00"
          >2023-03-19T20:43:03&#43;08:00</time
        >
        <time datetime="2023-03-19T20:51:48&#43;08:00"
          >2023-03-19T20:51:48&#43;08:00</time
        >
      </li>

      <li>
        <strong>
          <a href="https://busrouter.sg/#/services/22">22</a>
        </strong>

        <time datetime="2023-03-19T20:37:51&#43;08:00"
          >2023-03-19T20:37:51&#43;08:00</time
        >
        <time datetime="2023-03-19T20:58:13&#43;08:00"
          >2023-03-19T20:58:13&#43;08:00</time
        >
      </li>
    </ul>

    <p>
      Hint: Tap <a style="text-decoration: none" href="/">🚏</a> to find closest
      bus stop
    </p>

    <h4>Last updated: <span id="lastupdated"></span></h4>
  </body>
</html>
lokaqttq

lokaqttq4#

概念:这将使每行最多三个项目的间隙均匀:

li { flex: 1 0 26%;}

x一个一个一个一个x一个一个二个一个x一个一个三个一个
jsFiddle demo

相关问题