如何删除默认填充？答案

【问题标题】：How to remove default padding?如何删除默认填充？
【发布时间】：2017-04-23 13:51:04
【问题描述】：

在下面的代码中，我尝试创建一个动态菜单（这里它写成静态的）。当您单击菜单上的任何位置时，它会发出警报。

document.getElementById("rightMenu").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

ul,li{
  list-style:none;
  }
#prof-name {
    margin-top: 10%;
    padding-right: 0 ! important;
}

<ul id="rightMenu" class="user-profile">
   <li class="topmenu rtopmenu-display-event" id="prof-name">
       <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
       <ul class="profile-menu" id="profile-menu">
    <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
     <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
                <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
              </ul>
            </li>
                      </ul>

但我面临的问题是，如果单击菜单右侧，它会发出警报事件。

我已经尝试过padding-right: 0 ! important;，但它不起作用，无法为菜单设置特定宽度，因为它是动态生成的。

我该如何解决这个问题？

【问题讨论】：

嗯，一个人不会设置菜单的宽度和填充 (ul).. 只是它的子条目 (li)。
也许你应该只定位元素。

标签： javascript html css padding

【解决方案1】：

您的 UL 元素是块级元素，因此如果您检查它，您会发现它是 100% 宽的。

要么将其设置为 display: inline-block;或者给它一些特定的宽度。

#rightMenu { display: inline-block }

fiddle

【讨论】：

【解决方案2】：

是的，当然，这是因为您已将点击事件应用于整个<ul> 元素（菜单的容器），而不仅仅是菜单 - 只需定位<a> p>

将您的 javascript 代码更改为

document.querySelector("#rightMenu a").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

document.querySelector("#rightMenu a").addEventListener("click",function(){
  alert("oh you clicked on right Menu");
});

ul,li{
  list-style:none;
  }
#prof-name {
    margin-top: 10%;
    padding-right: 0 ! important;
}

<ul id="rightMenu" class="user-profile">
   <li class="topmenu rtopmenu-display-event" id="prof-name">
       <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
       <ul class="profile-menu" id="profile-menu">
    <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
     <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
                <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
              </ul>
            </li>
                      </ul>

【讨论】：

感谢您的努力(+1)，但是当您单击菜单的任何部分（包括 li）时，我需要提醒您，这就是为什么我是 tarjet

【解决方案3】：

使用此代码或直接在ul 中提供padding-left:0px

.user-profile
{
padding-left:0px;
}

【讨论】：

我觉得你在开玩笑，你能加一下sn-p

【解决方案4】：

document.getElementById("rightMenu").addEventListener("click",function(){
            alert("oh you clicked on right Menu");
        });

  html,body{
        padding:0;
        margin:0;
    }
    ul,li{
        list-style:none;
        padding:0;
        display:inline-block;
  
    }
    #prof-name {
        margin-top: 10%;
    }

<ul id="rightMenu" class="user-profile">
    <li class="topmenu rtopmenu-display-event" id="prof-name">
        <a href="javascript:void(0)"><span class=" ico fa fa-user"></span><span id="user-name">Hello afsal khan</span><span class="fa fa-caret-down"></span></a>
        <ul class="profile-menu" id="profile-menu">
            <li><a href="http://qmsadm.local/profile"><span class="ico fa fa-user"></span><span>Profile</span></a></li>
            <li><a href="http://qmsadm.local/password/change"><span class="ico fa fa-key" style ="margin-right:7px;"></span>Change Password</a></li>
            <li><a href="http://qmsadm.local/logout"><span class="ico fa fa-sign-out"></span>Logout</a></li>
        </ul>
    </li>
</ul>

【讨论】：