首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

CSS 搜索框背景圖 repeat-x 不生效問題排查

     編輯:程式設計疑難解答

問題現象

搜索框中間輸入框背景圖設置 background: url(...) repeat-x 不顯示,左右圖標正常。

原因分析

CSS 中對所有 .sousuo td 統一設置 width: 6px,導致中間輸入框所在 td 寬度僅 6px,背景圖無法橫向平鋪顯示。

解決方法

移除中間 td 的固定寬度,使其自適應撐開:

.sousuo td {
    height: 41px;
    /* width: 6px;  刪除此行 */
}

或在 HTML 中為該 td 指定 style="width:auto":

<td class="s_c z" style="width:auto">
    <input type="text" name="text" id="s_c_txt" />
</td>

效果驗證

修改後,中間輸入框背景圖正常水平平鋪,搜索框整體樣式恢復預期。

CSS 佈局中避免對彈性容器設置過度限制寬度,導致背景圖像無法正確渲染。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved