Question

我已经提出了自己的加号图标，因为字体 - 真棒模拟对我来说似乎很厚。但我有一个问题：点击图标非常困难。用户必须将光标准确地放在减号上才能单击图标或查看工具提示。

＆＃13;

.plus {
  position: relative;
  width: 15px;
  height: 15px;
}

.plus:before,
.plus:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: grey;
}

.plus:before {
  transform: rotate(90deg);
}

＆＃13;

<i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms">
			</i>

＆＃13;

Answer 1

在此代码中，我已将__attribute__ ((aligned (8)))更改为.plus display: block;和background: blue;，以向您展示其工作原理。

更改图标本身的位置时，您可能需要编辑padding: 3px;类以与填充对齐。

我希望这有帮助！ http://jsfiddle.net/6rekek66/1/

.plus:before

.plus {
  width: 15px;
  height: 15px;
  position: relative;
  display: block;
  background: blue;
  padding: 3px;
}

.plus:before,
.plus:after {
  position: absolute;
  left: 9px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: grey;
}

.plus:before {
  transform: rotate(90deg);
}

Answer 2

基本上添加display: block将解决此问题。在这里，我还添加了一个临时的粉红色背景，使可点击区域更加清晰，并调整了更多的值。

＆＃13;

.plus {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  background: pink;
}

.plus:before,
.plus:after {
  position: absolute;
  left: 7px;
  content: ' ';
  height: 15px;
  width: 2px;
  background-color: grey;
}

.plus:before {
  transform: rotate(90deg);
}

＆＃13;

<a href="#"><i id='new_contact' class="plus" title='Create contact' data-placement="left" data-toggle="tooltip" data-head="New sms">
</i></a>

＆＃13;

CSS图标难以点击

2 个答案: