亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

圖像 div 破壞文本輸入 HTML/CSS

圖像 div 破壞文本輸入 HTML/CSS

Smart貓小萌 2023-08-21 18:00:24
我正在處理一個簡單的網頁,我想向該頁面添加一個搜索欄。但是,當我添加搜索欄時,它不允許我在欄中單擊/鍵入。我最終發現在刪除這個 div 后我能夠點擊/輸入它:<div class="imagediv">    <img src="src/smallpaw.png">    </div>這用于在我的頁面標題上放置徽標,但我無法弄清楚為什么這會破壞搜索輸入。顯然我想保留這個標志在我的標題上,但任何幫助將不勝感激。這是我的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>&nbsp&nbspStudent Information</h1>    <br />    <form>      <input type="text" name="search" placeholder="Search" />    </form>  </body></html>
查看完整描述

1 回答

?
慕妹3242003

TA貢獻1824條經驗 獲得超6個贊

您的 imageDiv 應放置在 header div 內。這就是它與輸入框重疊并且您無法鍵入的原因。



查看完整回答
反對 回復 2023-08-21
  • 1 回答
  • 0 關注
  • 138 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號