如何將絕對定位元素寬度設定為父節點寬度？-有解無憂

在那個描述之后。（CodePen 鏈接）

要查看問題，將滑鼠懸停在“manimonji”上，您可以看到一個下拉串列，但串列第二個li的寬度，它與父寬度不相等（第二個li的位置是絕對的）。
注意：為了解決這個問題，我嘗試了 100% 的寬度。但不起作用。

JS檔案

<!-- begin snippet: js hide: false console: true babel: false -->
    $(document).ready(function(){
      $(".profile-name").mouseenter(function(){
        $(".profile-dropdown-cont li").css("border-color", "black");
        $(".profile-dropdown-cont li").show();
      });
      $(".profile-name").mouseleave(function(){
        $(".profile-dropdown-cont li").css("border-color", "transparent");
        $(".profile-dropdown-cont li").hide();
      });
    });

CSS 檔案

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");
    header,
    .footer-border {
      max-width: 100%;
      background: #1f1d21;
    }
    header{
      position: sticky;
      top:0;
    }
    body {
      margin: 0;
      background: #201e23;
    }
    .header-cont {
      width: 60%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    .icon {
      width: 50px;
      height: 50px;
      background: #1e1c21;
      border: 2px solid white;
      border-radius: 20px;
      margin: 15px 0;
      text-align: center;
      font-size: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
    }
    * {
      font-family: "Jost", sans-serif;
      color: white;
    }
    .menu-list {
      list-style: none;
      padding: 0;
      display: flex;
    }
    .menu-list > li {
      margin: 0px 0px 0px 20px;
      font-size: 20px;
      font-weight: 400;
    }
    .border {
      margin: 0 5px;
      border-bottom: 1px solid #161418;
    }
    .content {
      padding: 10px 0;
    }
    .content,
    .footer {
      max-width: 60%;
      margin: 0 auto;
    }
    .min-size {
      white-space: normal;
      width: fit-content;
    }
    .margin-fix {
    }
    p {
      text-align: justify;
      line-height: 27px;
    }
    footer {
      border-top: 1px solid #161418;
      margin: 0 5px;
      padding: 1px 0;
    }
    .footer > * {
      margin: 20px auto;
      width: fit-content;
    }
    .footer-border {
      position: relative;
      width: 100%;
      bottom: 0;
    }
    .copy-right {
      font-weight: 500;
      font-size: 20px;
    }
    .content-image {
      float: right;
    }
    .icons a *,
    .copy-right {
      opacity: 0.8;
    }
    .icons {
      display: flex;
    }
    .icons svg {
      margin-left: 20px;
      width: 30px;
    }
    a {
      text-decoration: none;
    }
    a *,
    a {
      transition: 0.5s;
    }
    a:hover *,
    a:hover {
      opacity: 1;
    }
    h1,
    p {
      margin: 10px 0;
    }
    .profile-cont {
      margin-left: auto;
      display: flex;
      align-items: center;
      height: 55px;
    }
    .profile-img {
      height: 55px;
    }
    .profile-name {
      display:unset !important;
      font-weight: 600;
    }
    .down-svg {
      padding-top: 5px;
      margin-left: 3px;
    }
    .profile-dropdown-cont{
      padding:0;
      list-style:none;
      cursor:pointer;
    }
    .profile-dropdown-cont li:first-child{
      position:relative;
      border-radius:5px 5px 0 0;
    }
    .profile-dropdown-cont li{
      padding:5px 10px;
      border:solid 1px transparent;
      margin-left: 10px;
      margin-top:5px;
      font-size: 20px;
      position:absolute;
      display:none;
      width:100%;
    }
    @media only screen and (max-width: 1175px){
      .header-cont,.content {
        max-width:80%;
        width:80%;
      }
    }
    @media only screen and (max-width: 900px){
      .header-cont,.content {
        max-width:90%;
        width:90%;
      }
    }

HTML 檔案

<html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://kit.fontawesome.com/22f7b461fc.js" crossorigin="anonymous"></script>
    </head>
    <header>
      <div class="border">
        <div class="header-cont">
          <div class="icon"><span>D</span></div>
          <ul class="menu-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
          </ul>
          <div class="profile-cont">
            <img src="https://s6.uupload.ir/files/profile-pic_qqbw.png" class="profile-img">
            <ul class="profile-dropdown-cont" onclick="click()">
              <li class="profile-name">
                manimonji
                          <svg xmlns="http://www.w3.org/2000/svg" class="down-svg" width="14" height="14" stroke="white" stroke-width="2" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
              </svg>
              </li>
              <li>hi</li>
            </ul>
          </div>
        </div>
      </div>
    </header>

    <body>
      <div class="content">
        <h1 class="min-size">Feel The Darkness</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        </p>
        <h1 class="min-size">Light Is Bad, Shadow Is Good</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        </p>
        <h1 class="min-size">Color, LOL</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
        </p>
      </div>
      <div class="footer-border">
        <footer>
          <div class="footer">
            <div class="copy-right"> &copy; 2022 Mani Monji, All Rights Reserved</div>
            <div class="icons">
              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
                </svg></a>
              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
              </a>
              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
                </svg></a>
            </div>
          </div>
        </footer>
      </div>
    </body>
</html>

uj5u.com熱心網友回復：

您需要設定position: relative;為絕對定位元素的父級。這解決了你的問題。

此外，我添加box-sizing: border-box;了li，并且還添加了 acalc()來正確計算寬度，因為 100% 不是指第一個li，它是ul. 這意味著我們需要減去lis 邊距才能獲得正確的寬度。

作為旁注，你可以完全不用 JS，只用 CSS ：D

$(document).ready(function(){
  $(".profile-name").mouseenter(function(){
    $(".profile-dropdown-cont li").css("border-color", "black");
    $(".profile-dropdown-cont li").show();
  });
  $(".profile-name").mouseleave(function(){
    $(".profile-dropdown-cont li").css("border-color", "transparent");
    $(".profile-dropdown-cont li").hide();
  });
});

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap");
header,
.footer-border {
  max-width: 100%;
  background: #1f1d21;
}
header{
  position: sticky;
  top:0;
}
body {
  margin: 0;
  background: #201e23;
}
.header-cont {
  width: 60%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.icon {
  width: 50px;
  height: 50px;
  background: #1e1c21;
  border: 2px solid white;
  border-radius: 20px;
  margin: 15px 0;
  text-align: center;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
* {
  font-family: "Jost", sans-serif;
  color: white;
}
.menu-list {
  list-style: none;
  padding: 0;
  display: flex;
}
.menu-list > li {
  margin: 0px 0px 0px 20px;
  font-size: 20px;
  font-weight: 400;
}
.border {
  margin: 0 5px;
  border-bottom: 1px solid #161418;
}
.content {
  padding: 10px 0;
}
.content,
.footer {
  max-width: 60%;
  margin: 0 auto;
}
.min-size {
  white-space: normal;
  width: fit-content;
}
.margin-fix {
}
p {
  text-align: justify;
  line-height: 27px;
}
footer {
  border-top: 1px solid #161418;
  margin: 0 5px;
  padding: 1px 0;
}
.footer > * {
  margin: 20px auto;
  width: fit-content;
}
.footer-border {
  position: relative;
  width: 100%;
  bottom: 0;
}
.copy-right {
  font-weight: 500;
  font-size: 20px;
}
.content-image {
  float: right;
}
.icons a *,
.copy-right {
  opacity: 0.8;
}
.icons {
  display: flex;
}
.icons svg {
  margin-left: 20px;
  width: 30px;
}
a {
  text-decoration: none;
}
a *,
a {
  transition: 0.5s;
}
a:hover *,
a:hover {
  opacity: 1;
}
h1,
p {
  margin: 10px 0;
}
.profile-cont {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 55px;
}
.profile-img {
  height: 55px;
}
.profile-name {
  display:unset !important;
  font-weight: 600;
}
.down-svg {
  padding-top: 5px;
  margin-left: 3px;
}
.profile-dropdown-cont{
  position: relative;
  padding:0;
  list-style:none;
  cursor:pointer;
}
.profile-dropdown-cont li:first-child{
  position:relative;
  border-radius:5px 5px 0 0;
}
.profile-dropdown-cont li{
  /* This is needed, so that the paddings don't get added on the 100% but are included in the 100% */
  box-sizing: border-box;
  padding:5px 10px;
  border:solid 1px transparent;
  margin-left: 10px;
  margin-top:5px;
  font-size: 20px;
  position:absolute;
  display:none;
  /* the parent is the ul, so we need to subtract margin left  */
  width: calc(100% - 10px);
}
@media only screen and (max-width: 1175px){
  .header-cont,.content {
    max-width:80%;
    width:80%;
  }
}
@media only screen and (max-width: 900px){
  .header-cont,.content {
    max-width:90%;
    width:90%;
  }
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/22f7b461fc.js" crossorigin="anonymous"></script>
</head>
<header>
  <div class="border">
    <div class="header-cont">
      <div class="icon"><span>D</span></div>
      <ul class="menu-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <div class="profile-cont">
        <img src="https://s6.uupload.ir/files/profile-pic_qqbw.png" class="profile-img">
        <ul class="profile-dropdown-cont" onclick="click()">
          <li class="profile-name">
            manimonji
                      <svg xmlns="http://www.w3.org/2000/svg" class="down-svg" width="14" height="14" stroke="white" stroke-width="2" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
          </svg>
          </li>
          <li>hi</li>
        </ul>
      </div>
    </div>
  </div>
</header>

<body>
  <div class="content">
    <h1 class="min-size">Feel The Darkness</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    </p>
    <h1 class="min-size">Light Is Bad, Shadow Is Good</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    </p>
    <h1 class="min-size">Color, LOL</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar ligula justo, ac eleifend lorem tempor non. Nunc neque odio, rhoncus eu consequat et, iaculis at sem. Pellentesque venenatis a lorem ut ullamcorper. Praesent blandit tincidunt quam, in dapibus orci tincidunt sed. Aenean dignissim eget leo ac tempus. In diam lacus, fermentum nec nisi at, hendrerit molestie augue. Cras semper leo sit amet turpis placerat, non consectetur urna interdum. Phasellus lorem nunc, convallis vel elementum sodales, vulputate eu ligula. Pellentesque at imperdiet diam.
    </p>
  </div>
  <div class="footer-border">
    <footer>
      <div class="footer">
        <div class="copy-right"> &copy; 2022 Mani Monji, All Rights Reserved</div>
        <div class="icons">
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
              <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
            </svg></a>
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </a>
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
              <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
            </svg></a>
        </div>
      </div>
    </footer>
  </div>
</body>

</html>

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

標籤：html css 网络

上一篇：在request.GET(Django)中獲取URL引數

下一篇：將音頻與文本匹配