遇到网页尺寸太大的问题

问题描述 投票：0回答：1

我的问题是网页宽度太宽。

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  map = new Map(document.getElementById("map"), {
    center: { lat: 60.3690453554567, lng: 5.350072840196482 },
    zoom: 15,
    mapId: "e1b5c8f5a7e3b6e",
  });

  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 60.3690453554567, lng: 5.350072840196482 },
    });
}

initMap();
* {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 960px;
  margin: 0 auto;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 15px 20px;
  }
  
  .navbar-links-container {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .navbar-link a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    padding: 8px 12px;
    transition: background-color 0.3s ease;
  }
  
  .navbar-link a:hover {
    background-color: #575757;
    border-radius: 4px;
  }
  .navbar-hamburgerMenu {
    color: white;
  }
  

#map {
    height: 500px;
    width: 40%;
    margin: 0px;
    padding: 20px;
    position: relative;
    top: -100px;
    left: 0px;
    align-items: center;

}

h2 {
    display: flex;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin: 0 0 10px 0;
    position: relative;
    top: -100px;
    left: 0px;
    align-items: center;
    text-align: center;
}

h1 {
    display: flex;
    font-family: Arial, sans-serif; 
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin: 0 0 10px 0;
    position: relative;
    top: 220px;
    left: 600px;
    text-align: center;
}

.ul_kontakt li {
    display: flex;
    list-style-type: none;
    list-style-position: inside;
    line-height: 1.5;
    font-size: 20px;
    position: relative;
    top: 200px;
    left: 600px;
    text-align: center;
}

.div_kontakt {
  position: relative;
  justify-content: center;
  float: right;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  
}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>
            HVLTopia Kontakt oss
        </title>
    <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "AIzaSyDMSf58ogqi6b-SYOZiuQ-a6PuQDXRrtY4",
          v: "weekly",
          // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
          // Add other bootstrap parameters as needed, using camel case.
        });
      </script>
    <link rel="stylesheet" href="kontakt.css">
    <body>
        <nav class="navbar">
            <ul class="navbar-links-container">
              <li class="navbar-link"><a href="#home">Home</a></li>
              <li class="navbar-link"><a href="#news">Status</a></li>
              <li class="navbar-link"><a href="#contact">Info</a></li>
              <li class="navbar-link"><a href="#about">Contact</a></li>
            </ul>
            <svg
              class="navbar-hamburgerMenu"
              width="40"
              height="28"
              viewBox="0 0 40 28"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 14H38M2 2H38M2 26H38"
                stroke="white"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </nav>
        <div class="kontakt">
          <h1>
            Kontakt Info:
        </h1>
          <ul class="ul_kontakt">
            <li>
                Telefon: +47 123 45 678
            </li>
            <li>
                Besøksadresse: 5003 Bergen
            </li>
            <li>
                Fax: +47 123 45 678
            </li>
            <li>
                Epostadresse: [email protected]  
            </li>
          </ul>
        </div>
        <h2>
            Finn oss her:
        </h2>
      <div id="map">
        <script src="kontakt.js"></script>
        </div>
            
        </body>
</html>

尝试更改不同内容的宽度。 主要问题是

ul
和
h1
，但我不知道如何解决它。

我尝试了一些方法，但似乎没有效果。

任何可以帮助我的人

javascript html css
1个回答
0
投票

看起来网页太宽的问题很可能是由某些元素的定位引起的，尤其是

h1
和
.ul_kontakt li
，它们是使用具有较大左偏移量的相对定位来定位的。这使得它们看起来远离中心，导致网页太宽。

要解决此问题，请尝试以下调整：

删除左偏移：您可以使用 

left: 600px;
或 
margin
将元素居中，而不是使用较大的左偏移（如 
flexbox
）。

CSS 更新：

h1 {
    font-family: Arial, sans-serif; 
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin: 0 0 10px 0;
    text-align: center;
    /* Remove position and left offsets */
}

.ul_kontakt {
    text-align: center;
    padding: 0;
}

.ul_kontakt li {
    list-style-type: none;
    line-height: 1.5;
    font-size: 20px;
    /* Remove position and left offsets */
}

.kontakt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.