I am attempting to include two clickable icons on the right side of a list item, but the anchors containing the icons seem to be expanding too wide without any padding or margins, causing their clickable zones to overlap.
Could this be an issue with the fontawesome icons, or is there another underlying problem that I am overlooking?
Here is the link to the 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;
}