Как удалить отступы по умолчанию?

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;, но это не работает , невозможно установить определенную ширину меню, потому что она генерируется динамически.

Как я могу решить эту проблему?

javascript html css padding

0

Dream Hunter - hashADH 8 Дек 2016 в 13:43

Answer 1

Ваш элемент UL является элементом уровня блока, поэтому, если вы осмотрите его, вы увидите, что он имеет ширину 100%.

Либо установите его для отображения: inline-block; или дать ему определенную ширину.

#rightMenu { display: inline-block }

играть на скрипке

3

VilleKoo 8 Дек 2016 в 10:52

Answer 2

Используйте этот код или просто введите padding-left:0px в ul

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

0

M. Lak 8 Дек 2016 в 10:57

Answer 3

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>

-1

thangavel .R 8 Дек 2016 в 11:41

Answer 4

Да, конечно, так будет потому, что вы применили событие click ко всему элементу <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>

1

Nikhil Nanjappa 8 Дек 2016 в 10:59

Как удалить отступы по умолчанию?

4 ответа

Похожие вопросы

Новые вопросы

javascript