文章插图
从用户体验的角度来看，这是难以访问和糟糕的 。在 HTML 中，可以使用for属性将标签与输入框绑定在一起 。
<input type="checkbox" id="option1"><label for="option1">Option 1</label>或者可以将输入框放置在标签内：<label for="option1"> Option 1 <input type="checkbox" id="option1"></label>然后，在<label>元素上添加padding，以使可点击区域变大 。这样，问题得以解决，整个复选框或单选按钮都是可单击的，如下图所
文章插图
侧边栏对于带有类别的页面，有时我会注意到列表链接没有扩展到其父页面的整个宽度 。也就是说，可点击区域仅在文本上，如下图所示：
文章插图
解决方法：
- 删除<li>元素的 padding，并将其移动到<a>元素
- 通过添加display: block使a标签的宽度等于其父链接的宽度 。
.nav-item a { /*Other styles*/ padding: 12px 16px; display: block;}添加后，如下所示：
文章插图
真实案例在最近的Twitter更新中，导航设计在可点击区域大小方面存在问题 。最初，它仅与文本相关，如下面的屏幕截图所示，但他们在收到反馈后将其修复 。
文章插图
章节标题在某些情况下，需要在章节标题的远端添加“查看更多”按钮或箭头 。在下面的示例中，我将箭头放置在假圆中，以便可以正确地使箭头居中 。
通常情况下，箭头周围的间距可以使用padding或width和height 。
文章插图
使用伪元素来增加可点击区域仅通过改变元素的宽度和高度或使用padding，并不总是能够使可点击区域变大，这时候就需要伪元素救场了 。
这个想法是，伪元素属于其父元素，因此当我们创建具有特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域 。
在下图中，我在菜单按钮中添加了:after伪元素:
.menu-2:after { content: ""; position: absolute; left: 55px; top: 0; width: 50px; height: 50px; background: #e83474; /*Other styles*/}
文章插图
事例源码：https://codepen.io/shadeed/pen/BXXjEg?editors=0100
推荐阅读
- 开淘宝店如何运营的详细步骤 淘宝网店如何运营
- 甄嬛传|甄嬛传：太医卫临教你如何进入公司领导核心层
- 淘宝网店如何推广呢 淘宝店铺推广手段
- 淘宝怎么做流量才能好起来 提高淘宝店铺流量的方法
- 广告推广如何执行呢
- 普洱茶如何挑选,如何挑选茶宠
- “节后综合征”袭来，该如何应对
- 茶叶香气逼人或有假 业内人士教你如何辨别
- 如何判断茶叶是否变质过期
- 如何运营好一个淘宝店铺 淘宝店铺运营要做哪些