时间戳

首页 > 解决方案 > 如何使网页（仪表板）响应包括角度的地图（传单）

html - 如何使网页（仪表板）响应包括角度的地图（传单）

问题描述

我想让我的仪表板页面具有响应性，它还包括地图**（Leaflet OpenStreet 地图）**。我已经尝试过，但它没有显示出完美的结果。

仪表板.component.css

#map{
  height: 550px;
  width: 920px;
  border: 1px solid brown;
margin-left: 5px;
position: relative;
}
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;

  padding: 8px;
  color: white;
  text-decoration: none;
  font-size: 20px;
 
}
.text{
  position: absolute;
margin-top: -589px;
 margin-left: 950px;
   width:400px;
   padding: 19px;
   background:transparent;
   border-radius:0px;
   border:0px;
   border-bottom: 1px solid grey;
   font-size: 17px;
   color: white;
   height: 40px;
   }
.list{max-height:88vh;
  margin:0;
  overflow:auto;
  padding:0;
}

** 我已将 CSS 媒体查询用于响应式页面**

 @media only screen and (max-width: 480px) {

  .navbar a {
    float: none;
width: 100%;   
                    }
            #map{
              margin: 0;
               padding: 0;
                width:100%;
                height: 400px;
overflow: auto;
            }
    
.text{
  width: 100%;
display:block;
  font-size: 15px;
  bottom: 0px;
float: left;
margin-left: 0px;
margin-top: 100%;
}

.list{max-height:100vh;
  margin-top:135px;
  overflow: auto;
  padding:0;
}


}

仪表板.component.html

<div class="navbar" >
      <img src="assets/img/img.jpeg" height="45" width="45" style="mix-blend-mode: multiply;opacity: 0.6;"  >
        <a class="active" href="#"> Home</a> 
        <a href="#"> About</a> 
        <a href="#" > Notifications</a>
        <a href="#" > Settings</a>
        <a href="#">User Info</a>
       <a href="#">Profile</a>
        <a href="#"> Logout</a>
    
    </div>
    

        <div id="map">
      </div>
    <div class="text">
      <br>
    <ul class="list">
        <li *ngFor="let x of data" class="fetch">
         {{x.data1}}<br>
         {{x.data2}}
      
    </li>
</li>
</div>

我尝试了很多方法，但它没有响应我希望看到我的页面对谷歌地图有响应。

标签： htmlcssangularangular8

解决方案

顺便说一句，您上面的 HTML 标记已损坏，无效或正确关闭。可能会导致浏览器出现问题，尤其是在视觉表示方面。在 HTML 标记的最后一行之前的行中查看双结束 </li> 标记。

<div class="navbar">
  <img src="assets/img/img.jpeg" height="45" width="45" style="mix-blend-mode: multiply;opacity: 0.6;"/>
  <a class="active" href="#"> Home</a>
  <a href="#">About</a>
  <a href="#">Notifications</a>
  <a href="#">Settings</a>
  <a href="#">User Info</a>
  <a href="#">Profile</a>
  <a href="#">Logout</a>
</div>


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

<div class="text">
  <ul class="list">
    <li *ngFor="let x of data" class="fetch">
      {{x.data1}}<br>
      {{x.data2}}
    </li>
  </ul>
</div>

推荐阅读