你如何在下拉列表中删除包装填充？

Posted 2023-04-13

【中文标题】你如何在下拉列表中删除包装填充？

【英文标题】：how do you remove wrapper padding at dropdown?

【发布时间】：2021-03-25 12:47:36

【问题描述】：

我想从下拉菜单中删除包装器左右两侧的 21.1px 填充，但重要的是，我尝试的其他方法也不起作用。提前感谢您提出的解决方案。 （我说的1050px及以下的情况应该更正了。）codepen：https://codepen.io/BerkayAkgurgen/pen/ExgWKJX

const menuBtn = document.querySelector('.hamburger-menu');
let menuOpen = false;
menuBtn.addEventListener('click', () => 
  if (!menuOpen) 
    menuBtn.classList.add('open');
    menuOpen = true;
   else 
    menuBtn.classList.remove('open');
    menuOpen = false;
  
);

@media screen and (max-width: 1050px) 
  .hamburger-menu
  cursor: pointer;
  transition: .6s;
  transition: all .5s ease-in-out;
  padding-right: 15px;


.line
    position: relative;
    display: inline-block;
    width: 12px;
    height: 2px;
    background-color: white;
    transition: all .5s ease-in-out;


.line::before,
.line::after
    position: absolute;
    content: '';
    width: 16px;
    height: 2px;
    background-color: white;
    box-shadow: 0 5px 2px -2px black;
    transition: all .5s ease-in-out;


.line::before
    transform: translateY(6px);


.line::after
    transform: translateY(-6px);


.hamburger-menu:hover
    transform: translateY(-25%);


.hamburger-menu:hover .line:before
    box-shadow: 0 5px 10px 1px black;



.hamburger-menu.open .line
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  
  
.hamburger-menu.open .line::before
    transform: rotate(45deg) translate(35px, -35px);
  
  
.hamburger-menu.open .line::after
    transform: rotate(-45deg) translate(35px, 35px);
  

  #site-header
      padding: 0px;
  
  
  .wrapper
      position: absolute;
      background-color: rgb(142, 101, 192);
      top: 100%;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 0px 21.1px;
  

  .list
      flex-direction:column;
      width: 100%;
  

  .list .list-item
      padding: 14.1px 21.1px;
      width: 100%;
    background-color: rgb(142, 101, 192);
  

  .list-item i
    top: 16.5px;
    left: 92px;


  .account-menu
      flex-direction: column;
      width: 100%;
  

  .account-menu .account-item
      padding: 14.1px 0px;
      width: 100%;
  

  .account-menu .theme
      display: block;
      margin: 37.5px 0px;
      padding: 19px 15.6px;
      text-align: center;
      background-color: white;
      transition: .4s;
  

  .theme:hover
    transform: scale(1.05);
    background-color: white;
    border: none;
    box-shadow: 0 4px 15px 1px;
  

  .theme .item-paragraph
      padding: 0px 12px;
      color: rgb(42, 33, 54);
      font-size: 20px;
  

  .dropdown
      width: 100%;
      padding: 0px !important;
      background-color: rgba(0, 0, 0, 0.2);
  


@media screen and (min-width: 1051px) 
  .dropdown
    position: absolute;
    opacity: 0;
    background-color: white;
    top: 37px;
    min-width: 231px;
    padding: 12px 0px;
    border-radius: 4px;
    transition: all .9s ease;

.item-4:hover .dropdown
    opacity: 1;
    transform: translateY(0);
   

.dropdown .dropdown-item
    position: relative;
    padding: .7em;


.dropdown .dropdown-item:hover
    background-color: hsl(0, 0%, 93%);


.dropdown .dropdown-item .dropdown-header
 display: inline-block;
 color: black;
 margin-bottom: 5px;
 font-size: 20.5px;
 font-weight: 600;


.dropdown .dropdown-item .dropdown-span
    display: block;
    color: #665c73;
    font-size: 13.8px;
    font-weight: 400;
    font-weight: normal;



.account-menu .theme:hover
    background-color: white;
    border: none;
    transform: scaleY(1.08); 
    box-shadow: 0 5px 2px -2px var(--text-color-nav);
    transform: translateY(-10%);


.account-menu .theme:hover a
    color: var(--text-color-body);


.account-menu .theme a
    padding: 0px 14px;
    font-size: 20px;
    font-weight: 700;


.theme:hover a
    display: inline-block;
    animation: shake 1s;
  

  @keyframes shake 
    0%  transform: translate(1px, 1px) rotate(0deg); 
    10%  transform: translate(-1px, -2px) rotate(-1deg); 
    20%  transform: translate(-3px, 0px) rotate(1deg); 
    30%  transform: translate(3px, 2px) rotate(0deg); 
    40%  transform: translate(1px, -1px) rotate(1deg); 
    50%  transform: translate(-1px, 2px) rotate(-1deg); 
    60%  transform: translate(-3px, 1px) rotate(0deg); 
    70%  transform: translate(3px, 1px) rotate(-1deg); 
    80%  transform: translate(-1px, -1px) rotate(1deg); 
    90%  transform: translate(1px, 2px) rotate(0deg); 
    100%  transform: translate(1px, -2px) rotate(-1deg); 
  

  .dropdown-item > a > .dropdown-header::after 
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: black;
    transition: width .3s;


.dropdown-item:hover a > .dropdown-header::after 
    width: 100%;
    transition: width .3s;



.list-item > a::after 
    position: absolute;
    bottom: -6px;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fac919;;
    transition: width .3s;


.list-item > a:hover::after 
    width: 100%;
    transition: width .3s;


.list-item > a::after 
    position: absolute;
    bottom: -6px;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fac919;;
    transition: width .3s;


.list-item > a:hover::after 
    width: 100%;
    transition: width .3s;


.account-menu .log-in > a::after 
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fac919;;
    transition: width .3s;


.account-menu .log-in > a:hover::after 
    width: 16%;
    transition: width .3s;



*,
*::before,
*::after
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;


:root 
   --bg-color: rgba(142, 101, 192); 
   --color-light: rgb(255, 255, 255);
   --btn-text-color: rgb(0, 202, 182);
   --text-color-body: rgb(47, 47, 47);
   --text-color-nav:rgb(42, 33, 54);
   --hover-color: #fac919;


/*
 Adelle
 font-family: 'Varta', sans-serif; 
 */

body
    font-family: 'Roboto', sans-serif;


ul
  list-style: none;


a
  text-decoration: none;
  color: black;


#site-header
    position: sticky;
    top: 0px;
    z-index: 999;
    width: 100%;
    background-color: var(--bg-color);
    padding: 0px 48px;


#site-header::before
    position: absolute;
    content: '';
    width: 50%;
    right: 0px;
    top: 0px;
    height: 100%;
    background-image: url(./img/nokta6.png);
    background-position: center;
    background-size: cover;


#top-bar
    max-width: 1240px;
    margin: 0px auto;


.flex-wrapper
    position: relative;
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;


.wrapper
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin-left: auto;
    height: 100%;


.brand-logo
    display: flex;
    align-items: center;
    min-height: 100%;


.nav-list
    display: flex;
    height: 100%;


.nav-list .list
    display: flex;
    align-items: center;


.list-item
    position: relative;
    margin: 0px 12px;


.list-item a
    display: inline-block;
    color: white;
    font-size: 18px;
    font-weight: 600px;
    font-weight: bolder;


.item-4 a:hover i
    opacity: 1;


.list-item i
    position: absolute;
    opacity: .6;
    top: 2px;
    left: 92px;


.account
    position: relative;
    display: flex;
    min-height: 100%;


.account .account-menu
    display: flex;
    align-items: center;


.account-menu a
    display: inline-block;
    color: white;
    font-size: 18px;
    font-weight: 600px;
    font-weight: bolder;


.account-menu .theme
    background-color: var(--bg-color);
    border: 0.12em solid white;
    border-radius: 4px;
    padding: 0.6em 1.1em 0.7em;
    cursor: pointer;
    transition: transform .3s;


.account-menu .log-in
    padding: 0px 12px;

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Pixel Grade</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='main.css'>
    <link rel="stylesheet" media="(min-width:1051px)" href="desktop.css"/>
    <link rel="stylesheet" media="(max-width:1050px)" href="mobile.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varta:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Varta:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 
</head>
<body>
 <header id="site-header">
     <nav id="top-bar">
     <div class="flex-wrapper">
     <div class="brand-logo">
         <img src="./img/logo2.png"   style="cursor: pointer;">
     </div>
     <div class="wrapper">
     <div class="nav-list">
         <ul class="list">
             <li class="list-item item-1"><a href="#" class="item-paragraph">Themes</a></li>
             <li class="list-item item-2"><a href="#" class="item-paragraph">About</a></li>
             <li class="list-item item-3"><a href="#" class="item-paragraph">Testimonials</a></li>
             <li class="list-item item-4"><a href="#" class="item-paragraph">Resources <span> <i class="fas fa-chevron-down"></i> </span></a>
            <ul class="dropdown">
                <li class="dropdown-item"><a href="#">
                    <h2 class="dropdown-header">Upstairs</h1>
                        <span class="dropdown-span">
                            Stories and lessons packed into flavored articles
                        </span>
                </a></li>
                <li class="dropdown-item"><a href="#" class="item-paragraph">
                    <h2 class="dropdown-header">Free eBooks</h1>
                        <span class="dropdown-span">
                            In-depth guides to apply on your terms
                        </span>
                </a></li>
                <li class="dropdown-item"><a href="#" class="item-paragraph">
                    <h2 class="dropdown-header">Help Center</h1>
                        <span class="dropdown-span">
                            Nitty-gritty instructions about our products
                        </span>
                </a></li>
                <li class="dropdown-item"><a href="#" class="item-paragraph">
                    <h2 class="dropdown-header">Contact Us</h1>
                        <span class="dropdown-span">
                            The door is open, please enter
                        </span>
                </a></li>
            </ul>
            </li>
         </ul>
     </div>
    <div class="account">
        <ul class="account-menu">
            <li class="account-item log-in"><a href="#" class="item-paragraph">Log in</a></li>
            <li class="account-item theme"><a href="#" class="item-paragraph"><span class="shake-letter">Ch</span>oose The Theme</a></li>
        </ul>
    </div>
</div>
    <div class="hamburger-menu">
        <span class="line"></span>
    </div>
</div>
     </nav>
 </header>



 <script src="api.js"></script>
</body>
</html>

【参考方案1】：

在您的 css 中查找以下代码，相应地调整填充，您可以使用删除 css 左右填充 “填充：.7rem 0;”

.dropdown .dropdown-item
position: relative;
padding: .7em;

【讨论】：

我希望hizliresim.com/ojTm0P 涵盖此链接上的所有字段。你说的没用。

【参考方案2】：

更改css代码行：

    padding: .7em;

到

padding: .7em 0 .7em 0

如果我没听错的话……

【讨论】：

我希望hizliresim.com/ojTm0P 涵盖此链接上的所有字段。你说的没用。

不太了解您。什么意思？

我希望弹出的背景颜色用我绘制的填充覆盖其区域。