我不认为我想看到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+08:00">2023-03-19T20:19:31+08:00</time>
<time dateTime="2023-03-19T20:37:34+08:00">2023-03-19T20:37:34+08:00</time>
<time dateTime="2023-03-19T20:50:38+08:00">2023-03-19T20:50:38+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/24'>24</a>
</strong>
<time dateTime="2023-03-19T20:19:55+08:00">2023-03-19T20:19:55+08:00</time>
<time dateTime="2023-03-19T20:53:17+08:00">2023-03-19T20:53:17+08:00</time>
<time dateTime="2023-03-19T20:54:15+08:00">2023-03-19T20:54:15+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/21'>21</a>
</strong>
<time dateTime="2023-03-19T20:20:44+08:00">2023-03-19T20:20:44+08:00</time>
<time dateTime="2023-03-19T20:35:07+08:00">2023-03-19T20:35:07+08:00</time>
<time dateTime="2023-03-19T20:49:38+08:00">2023-03-19T20:49:38+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/13'>13</a>
</strong>
<time dateTime="2023-03-19T20:20:48+08:00">2023-03-19T20:20:48+08:00</time>
<time dateTime="2023-03-19T20:30:31+08:00">2023-03-19T20:30:31+08:00</time>
<time dateTime="2023-03-19T20:45:41+08:00">2023-03-19T20:45:41+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/67'>67</a>
</strong>
<time dateTime="2023-03-19T20:22:24+08:00">2023-03-19T20:22:24+08:00</time>
<time dateTime="2023-03-19T20:25:35+08:00">2023-03-19T20:25:35+08:00</time>
<time dateTime="2023-03-19T20:27:59+08:00">2023-03-19T20:27:59+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/7'>7</a>
</strong>
<time dateTime="2023-03-19T20:22:26+08:00">2023-03-19T20:22:26+08:00</time>
<time dateTime="2023-03-19T20:31:30+08:00">2023-03-19T20:31:30+08:00</time>
<time dateTime="2023-03-19T20:45:46+08:00">2023-03-19T20:45:46+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/28'>28</a>
</strong>
<time dateTime="2023-03-19T20:22:48+08:00">2023-03-19T20:22:48+08:00</time>
<time dateTime="2023-03-19T20:38:45+08:00">2023-03-19T20:38:45+08:00</time>
<time dateTime="2023-03-19T20:50:09+08:00">2023-03-19T20:50:09+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/30'>30</a>
</strong>
<time dateTime="2023-03-19T20:25:57+08:00">2023-03-19T20:25:57+08:00</time>
<time dateTime="2023-03-19T20:38:32+08:00">2023-03-19T20:38:32+08:00</time>
<time dateTime="2023-03-19T20:53:32+08:00">2023-03-19T20:53:32+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/93'>93</a>
</strong>
<time dateTime="2023-03-19T20:27:43+08:00">2023-03-19T20:27:43+08:00</time>
<time dateTime="2023-03-19T20:55:32+08:00">2023-03-19T20:55:32+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/2'>2</a>
</strong>
<time dateTime="2023-03-19T20:30:14+08:00">2023-03-19T20:30:14+08:00</time>
<time dateTime="2023-03-19T20:39:08+08:00">2023-03-19T20:39:08+08:00</time>
<time dateTime="2023-03-19T20:39:16+08:00">2023-03-19T20:39:16+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/51'>51</a>
</strong>
<time dateTime="2023-03-19T20:30:19+08:00">2023-03-19T20:30:19+08:00</time>
<time dateTime="2023-03-19T20:36:15+08:00">2023-03-19T20:36:15+08:00</time>
<time dateTime="2023-03-19T20:44:24+08:00">2023-03-19T20:44:24+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/150'>150</a>
</strong>
<time dateTime="2023-03-19T20:30:40+08:00">2023-03-19T20:30:40+08:00</time>
<time dateTime="2023-03-19T20:50:54+08:00">2023-03-19T20:50:54+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/60'>60</a>
</strong>
<time dateTime="2023-03-19T20:31:03+08:00">2023-03-19T20:31:03+08:00</time>
<time dateTime="2023-03-19T20:42:10+08:00">2023-03-19T20:42:10+08:00</time>
<time dateTime="2023-03-19T20:57:53+08:00">2023-03-19T20:57:53+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/26'>26</a>
</strong>
<time dateTime="2023-03-19T20:31:06+08:00">2023-03-19T20:31:06+08:00</time>
<time dateTime="2023-03-19T20:42:32+08:00">2023-03-19T20:42:32+08:00</time>
<time dateTime="2023-03-19T20:56:32+08:00">2023-03-19T20:56:32+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/63'>63</a>
</strong>
<time dateTime="2023-03-19T20:32:56+08:00">2023-03-19T20:32:56+08:00</time>
<time dateTime="2023-03-19T20:43:32+08:00">2023-03-19T20:43:32+08:00</time>
<time dateTime="2023-03-19T20:59:15+08:00">2023-03-19T20:59:15+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/61'>61</a>
</strong>
<time dateTime="2023-03-19T20:35:28+08:00">2023-03-19T20:35:28+08:00</time>
<time dateTime="2023-03-19T20:43:51+08:00">2023-03-19T20:43:51+08:00</time>
<time dateTime="2023-03-19T20:55:03+08:00">2023-03-19T20:55:03+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/63M'>63M</a>
</strong>
<time dateTime="2023-03-19T20:36:45+08:00">2023-03-19T20:36:45+08:00</time>
<time dateTime="2023-03-19T20:43:03+08:00">2023-03-19T20:43:03+08:00</time>
<time dateTime="2023-03-19T20:51:48+08:00">2023-03-19T20:51:48+08:00</time>
</li>
<li>
<strong>
<a href='https://busrouter.sg/#/services/22'>22</a>
</strong>
<time dateTime="2023-03-19T20:37:51+08:00">2023-03-19T20:37:51+08:00</time>
<time dateTime="2023-03-19T20:58:13+08:00">2023-03-19T20:58:13+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>
4条答案
按热度按时间1l5u6lss1#
尝试宽度:50%;对于li标签,如下所示:
cnh2zyt32#
看起来你试图防止
li
元素在同一行上容纳尽可能多的元素时换行。如果是这样的话,你可以为li
硬编码一个最大限制:试试看:
x一个一个一个一个x一个一个二个一个x一个一个三个一个
emeijp433#
您可以通过添加li标签建议的@media查询规则来针对不同的屏幕大小:您可以对这些类型的数据使用表
lokaqttq4#
概念:这将使每行最多三个项目的间隙均匀:
x一个一个一个一个x一个一个二个一个x一个一个三个一个
jsFiddle demo