关于float属性导致button按钮无法点击问题的解决思路

Love The Way You Lie 2021-09-25 08:18 525阅读 0赞

问题描述：有两个标签p和span，p位于span上层，button位于span中，当点击button的时候，button没有动作。

部分代码

HTML代码

  1. <p>
  2.     {
  3.    { chapter.title }}
  4.     <span class="acts">
  5.         <el-button style="" type="text" @click="openVideo(chapter.id)">添加小节</el-button>
  6.         <el-button style="" type="text" @click="openEditChapter(chapter.id)">编辑</el-button>
  7.         <el-button type="text" @click="deleteChapter(chapter.id)">删除</el-button>
  8.     </span>
  9.  </p>

CSS代码

  1. .chanpterList p{
  2.     float: left;
  3.     font-size: 20px;
  4.     margin: 10px 0;
  5.     padding: 10px;
  6.     height: 70px;
  7.     line-height: 50px;
  8.     width: 100%;
  9.     border: 1px solid #3568cd;
  11.   }
  12.   .chanpterList .acts {
  13.       float: right;
  14.       font-size: 14px;
  15.   }

20210429102916222.png

如图此添加小节按钮无法使用

之前没细看，用网上的的方法，将.chanpterList p中的 float: left;注释掉，因为图层覆盖，导致按钮没法使用，果然起作用了，也没多想。但是当有了下面显示小节的组件的时候，样式就不对了，完全乱了。这才回过头来看问题

仔细看发现，p标签在span上面，导致span里的组件没法使用，那就提升span的优先级，把span定位在最上层就好了，

现在p和span中各增加相对定位position: relative;再在span中增加优先级z-index: 1;，完成！！成功

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70 1

发表评论

表情：
评论列表 （有 0 条评论，525人围观）

还没有评论，来说两句吧...

相关阅读