css按鈕按不了的原因有哪些

今天小編給大家分享一下css按鈕按不了的原因有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

css按鈕按不了是因?yàn)閳D層覆蓋，導(dǎo)致按鈕沒法使用，其解決辦法：1、打開相應(yīng)HTML和CSS文件；2、將p和span標(biāo)簽各增加相對(duì)定位為“position:relative;”；3、在span中增加優(yōu)先級(jí)為“z-index: 1;”即可。

關(guān)于float屬性導(dǎo)致button按鈕無(wú)法點(diǎn)擊問(wèn)題的解決思路

問(wèn)題描述：有兩個(gè)標(biāo)簽p和span，p位于span上層，button位于span中，當(dāng)點(diǎn)擊button的時(shí)候，button沒有動(dòng)作。

部分代碼

HTML代碼

 <p>
    {{ chapter.title }}
    <span class="acts">
        <el-button style="" type="text" @click="openVideo(chapter.id)">添加小節(jié)</el-button>
        <el-button style="" type="text" @click="openEditChapter(chapter.id)">編輯</el-button>
        <el-button type="text" @click="deleteChapter(chapter.id)">刪除</el-button>
    </span>
 </p>

CSS代碼

.chanpterList p{
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #3568cd;
 
  }
  .chanpterList .acts {
      float: right;
      font-size: 14px;
  }

如圖此添加小節(jié)按鈕無(wú)法使用

之前沒細(xì)看，用網(wǎng)上的的方法，將.chanpterList p中的 float: left;注釋掉，因?yàn)閳D層覆蓋，導(dǎo)致按鈕沒法使用，果然起作用了，也沒多想。但是當(dāng)有了下面顯示小節(jié)的組件的時(shí)候，樣式就不對(duì)了，完全亂了。這才回過(guò)頭來(lái)看問(wèn)題

仔細(xì)看發(fā)現(xiàn)，p標(biāo)簽在span上面，導(dǎo)致span里的組件沒法使用，那就提升span的優(yōu)先級(jí)，把span定位在最上層就好了，

現(xiàn)在p和span中各增加相對(duì)定位position: relative;再在span中增加優(yōu)先級(jí)z-index: 1;，完成??！成功

以上就是“css按鈕按不了的原因有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。