如何删除默认填充？

Question

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

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;，但是没有用，无法为菜单设置特定宽度，因为它是动态生成的。

我该如何解决这个问题？

Answer 1

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

要么设置为显示：inline-block；或者给它一些特定的宽度。

#rightMenu { display: inline-block }

fiddle

Answer 2

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

将您的 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>

Answer 3

使用此代码或直接在 ul

中输入 padding-left:0px

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

Answer 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>

如何删除默认填充？

How to remove default padding?

html

javascript

css

padding