Question

我想在列表项的右侧有两个可点击的图标。但是，由于某种原因，包含图标的锚点伸展得如此之宽（没有填充或边距），点击区域会重叠。

这是我的fontawesome图标的问题吗？或者是我找不到的其他问题。

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>

我也删除了不必要的跨度。

Anchor中的FontAwesome图标更适合内容

1 个答案: