我的網站有一個隨機空間，我該如何擺脫它？-有解無憂

導航欄左側有一個小空間。我只是無法擺脫它，我有點生氣。有人對此有想法嗎？還是只是我設備的大小？

    <div class="bar">
        <ul> 
            <li> <a href="#">CANCEL CUSTOM ORDER </a></li>
            <li> <a href="#">DRAFTS </a></li>
            <li> <a href="#">FEEDBACK </a></li>
        </ul>
    </div>

CSS：

div.bar {
  position: sticky;
}

div.bar ul {
  width: 110%;
  height: 40px;
  background-color: #a3b5c0;  
  border-bottom: 1px solid #96abb9;
  border-top: 1px solid #96abb9;
  text-align: center;
  margin: 0;
}

div.bar li {
  display: inline-block;
  font-size: 20px;
  font-family: 'Questrial';
  text-decoration: none;
  list-style-type: none;
}

div.bar li a {
  color: #efefef;
  text-decoration: none;
  padding: 0px 80px 20px 80px;
}

div.bar li a:hover:not(#active) {
  background-color: #8dbbc5;
  transform: scale(1.5);
}

uj5u.com熱心網友回復：

您可以使用以下方法在頁面加載時洗掉所有空格：

* {
   margin: 0;
   padding: 0;
}

*{
  margin: 0;
  padding: 0;
}

div.bar {
  position: sticky;
}

div.bar ul {
  width: 110%;
  height: 40px;
  background-color: #a3b5c0;  
  border-bottom: 1px solid #96abb9;
  border-top: 1px solid #96abb9;
  text-align: center;
  margin: 0;
}

div.bar li {
  display: inline-block;
  font-size: 20px;
  font-family: 'Questrial';
  text-decoration: none;
  list-style-type: none;
}

div.bar li a {
  color: #efefef;
  text-decoration: none;
  padding: 0px 80px 20px 80px;
}

div.bar li a:hover:not(#active) {
  background-color: #8dbbc5;
  transform: scale(1.5);
}

<div class="bar">
    <ul> 
        <li> <a href="#">CANCEL CUSTOM ORDER </a></li>
        <li> <a href="#">DRAFTS </a></li>
        <li> <a href="#">FEEDBACK </a></li>
    </ul>
</div>

uj5u.com熱心網友回復：

僅使用此添加body和洗掉 100% div.bar ul：

body {
        margin: 0;
        width: 100%;
    }
    div.bar {
        position: sticky;
    }

    div.bar ul {
        height: 40px;
        background-color: #a3b5c0;
        border-bottom: 1px solid #96abb9;
        border-top: 1px solid #96abb9;
        text-align: center;
        margin: 0;
    }

    div.bar li {
        display: inline-block;
        font-size: 20px;
        font-family: 'Questrial';
        text-decoration: none;
        list-style-type: none;
    }

    div.bar li a {
        color: #efefef;
        text-decoration: none;
        padding: 0px 80px 20px 80px;
    }

    div.bar li a:hover:not(#active) {
        background-color: #8dbbc5;
        transform: scale(1.5);
    }

<div class="bar">
    <ul>
        <li> <a href="#">CANCEL CUSTOM ORDER </a></li>
        <li> <a href="#">DRAFTS </a></li>
        <li> <a href="#">FEEDBACK </a></li>
    </ul>
</div>

uj5u.com熱心網友回復：

body {
  margin:0px;
  padding:0px;
  position: sticky;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411131.html

標籤：

上一篇：CSS@mediadisplayNOTinFALLSCREEN不起作用？

下一篇：底部div不居中，因為上面的div占用了更多空間。如何讓底部div居中？