我正在處理一個(gè)簡(jiǎn)單的網(wǎng)頁，我想向該頁面添加一個(gè)搜索欄。但是，當(dāng)我添加搜索欄時(shí)，它不允許我在欄中單擊/鍵入。我最終發(fā)現(xiàn)在刪除這個(gè) div 后我能夠點(diǎn)擊/輸入它：<div class="imagediv"> <img src="src/smallpaw.png"> </div>這用于在我的頁面標(biāo)題上放置徽標(biāo)，但我無法弄清楚為什么這會(huì)破壞搜索輸入。顯然我想保留這個(gè)標(biāo)志在我的標(biāo)題上，但任何幫助將不勝感激。這是我的index.html：<!DOCTYPE html><html> <head> <style> body { #background: url("src/header.png") no-repeat; } </style> <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="src/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> input[type="text"] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url("searchicon.png"); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 10px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type="text"]:focus { width: 100%; } input[type="text"]::placeholder { /* Firefox, Chrome, Opera */ text-align: left; } input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */ text-align: left; } </style> </head> <body> <div class="header"></div> <div class="imagediv"> <img src="src/smallpaw.png"> </div> <h1>  Student Information</h1> <br /> <form> <input type="text" name="search" placeholder="Search" /> </form> </body></html>
1 回答
慕妹3242003
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
您的 imageDiv 應(yīng)放置在 header div 內(nèi)。這就是它與輸入框重疊并且您無法鍵入的原因。
- 1 回答
- 0 關(guān)注
- 127 瀏覽
添加回答
舉報(bào)
0/150
提交
取消