FontAwesomeアンカー幅の広いアイコン

Question

リストアイテムの右側に2つのクリック可能なアイコンを表示しようとしています。しかし、何らかの理由で、アイコンを含むアンカーは、クリック領域が重なり合うように（パディングやマージンなしに）幅が広がります。

フォントワームのアイコンに問題がありますか？それとも私が見つけることができない別の問題ですか？

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スパンを不要にした。