如何将网格应用于 Mapbox 地图中的单个侧边栏列表？

Question

我正在使用来自 mapbox 的this example。

我想创建类似于可以在 Airbnb 和 Zillow 上看到的侧边栏列表的内容
:example

我能够将列应用于侧边栏本身，但不能将网格应用于各个列表。 看这里：N before after

我也尝试了对 html、css、js 的更改。没有成功。有人知道怎么做吗？

  <div id="map"></div>

<div class="map-overlay">
  <div class="listing-box">
  <div id="feature-listing" class="listing"></div>
    </div> 
</div>



#map {
  position: absolute;
  left: 50%;
  width: 50%;
  top: 0;
  bottom: 0;
  }
  .map-overlay {
  position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  background-color: #fff;
  max-height: 100%;
  overflow: auto;
  }

  .map-overlay input {
  display: block;
  border: none;
  width: 100%;
  border-radius: 3px;
  padding: 10px;
  margin: 0px;
  box-sizing: border-box;
  }

  .map-overlay .listing-box {
  display: block;
  margin: 10px;
  }
  
  .map-overlay .listing {
  postiton: absolute;
  display: inline-block;
  width: 100%;
  padding-bottom: 0px;
  -webkit-column-count: 2;  /* Chrome/Opera, Safari */
  -moz-column-count: 2; /* Mozilla Firefox */
  column-count: 2;
  -webkit-column-gap: 10px; /* Chrome/Opera, Safari */
  -moz-column-gap: 10px; /* Mozilla Firefox */
  column-gap: 10px;
  -webkit-column-rule: 1px single grey; /* Chrome/Opera, Safari */
  -moz-column-rule: 1px single grey; /* Mozilla Firefox */
  column-rule: 1px single grey;
  }

  .map-overlay .listing > * {
  display: block;
  height: 150px;
  padding: 5px 10px;
  margin-bottom: 10px;
 
    
  }

  .map-overlay .listing a {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #404;
  text-decoration: none;
  background: red;
  
    
  }

  .map-overlay .listing a:last-child {
  border: none;
  }

  .map-overlay .listing a:hover {
  background: #f0f0f0;
  }



 listingEl.innerHTML = "";
    if (features.length) {
      features.forEach(function(feature) {
        var prop = feature.properties;
        var item = document.createElement("a");
        item.href = prop.wikipedia;
        item.target = "_blank";
        item.textContent = prop.name + " (" + prop.abbrev + ")";
        item.addEventListener("mouseover", function() {

整个项目可以在here找到。

Answer 1

您的问题似乎只是 CSS，您需要删除某些样式才能查看 https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/ 上给出的列表的视图

1. 删除 .map-overlay .listing { CSS，因为它用 column-count: 2 划分您的网格；

.map-overlay .listing a {
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #404;
        text-decoration: none;
        /* background: red; */ //<---remove
}

.map-overlay .listing > * {
        display: block;
        /* height: 150px; */  //<---remove
        padding: 5px 10px;
        /* margin-bottom: 10px; */   //<---remove
}

截图：

祝你好运！