FontAwesome 앵커의 아이콘 폭이 넓은 콘텐츠에 맞게

Question

목록 항목의 오른쪽에 두 개의 클릭 가능한 아이콘이 표시됩니다. 그러나 어떤 이유로 인해 아이콘이 포함 된 앵커는 클릭 영역이 겹치기 때문에 너무 넓게 퍼집니다 (여백이나 여백없이).

fontohesome 아이콘에 문제가 있습니까? 아니면 찾을 수없는 다른 문제입니까?

jsfiddle : https://jsfiddle.net/mg6d8s75/1/

HTML :

<ul class="list-group ui-sortable" id="todolist"> 
    <li class="ui-sortable-handle"> 
    <div class="prettycheckbox"> 
     <div class="prettycheckbox-success"> 
     <input class="todocheckbox" type="checkbox" id="checkbox336" aria-label="..."> 
     <label for="checkbox336"> 
      <span>I'm a task!</span> 
      <a href="#notification-modal" id="notification336" class="notification-button pull-right" data-toggle="modal" data-task-id="336" data-due-date="1111-11-11"> 
      <span><i class="fa fa-bell-o" aria-hidden="true"></i></span> 
      </a> 
      <a href="" class="deletebutton pull-right" id="delete336"> 
      <span><i class="fa fa-times" aria-hidden="true"></i></span> 
      </a> 
     </label> 
     </div> 
    </div> 
    </li> 
</ul> 

CSS :

.deletebutton { 
    top: 10px; 
    right: 10px; 
    position: absolute; 
} 

.notification-button { 
    top: 10px; 
    right: 30px; 
    position: absolute; 
} 

/* TodoList Checkboxes */ 

.prettycheckbox input[type="checkbox"]:hover:not(:checked) ~ label { 
    color: #888; 
} 

.prettycheckbox input[type="checkbox"]:hover:not(:checked) ~ label:before { 
    content: '\2714'; 
    text-indent: .9em; 
    color: #C2C2C2; 
} 

.prettycheckbox div { 
    clear: both; 
    overflow: hidden; 
} 

.prettycheckbox label { 
    width: 100%; 
    border-radius: 3px; 
    border: 1px solid #D1D3D4; 
    font-weight: normal; 
} 

.prettycheckbox input[type="checkbox"]:empty { 
    display: none; 
} 

.prettycheckbox input[type="checkbox"]:empty ~ label { 
    position: relative; 
    line-height: 2.5em; 
    text-indent: 3.25em; 
    margin-top: 1px; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
} 

.prettycheckbox input[type="checkbox"]:empty ~ label:before { 
    position: absolute; 
    display: block; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    width: 2.5em; 
    background: #D1D3D4; 
    border-radius: 3px 0 0 3px; 
} 

.prettycheckbox input[type="checkbox"]:checked ~ label { 
    color: #31B44A; 
} 

.prettycheckbox input[type="checkbox"]:checked ~ label:before { 
    content: '\2714'; 
    text-indent: .9em; 
    color: #333; 
    background-color: #ccc; 
} 

.prettycheckbox input[type="checkbox"]:focus ~ label:before { 
    box-shadow: 0 0 0 3px #999; 
} 

.prettycheckbox-success input[type="checkbox"]:checked ~ label:before { 
    color: #fff; 
    background-color: #5cb85c; 
} 

#todolist > li { 
    display:inline; 
} 

Answer 1

이 레이블에서 링크를 제거하고이 문제

<ul class="list-group ui-sortable" id="todolist"> 
    <li class="ui-sortable-handle"> 
    <div class="prettycheckbox"> 
     <div class="prettycheckbox-success"> 
     <input class="todocheckbox" type="checkbox" id="checkbox336" aria-label="..."> 
     <label for="checkbox336"> 
      <span>I'm a task!</span> 
     </label> 
     <a href="#notification-modal" id="notification336" class="notification-button pull-right" data-toggle="modal" data-task-id="336" data-due-date="1111-11-11"> 
      <i class="fa fa-bell-o" aria-hidden="true"></i> 
     </a> 
     <a href="" class="deletebutton pull-right" id="delete336"> 
      <i class="fa fa-times" aria-hidden="true"></i> 
     </a> 
     </div> 
    </div> 
    </li> 
</ul> 

를 해결하는 것 나는 또한 r 그들의 불필요한 것으로 삼켜졌다.