常見搜索 input 浮動中間間隙 ---簡單解決方法

時間 2019-11-21

標籤常見搜索 input 浮動中間間隙簡單解決方法简体版

原文原文鏈接

緣由：inline-block元素之間有若是有換行或者空格就會有間隙html

解決方法：再父元素font-size:0; 便可還有許多其餘方法，自行百度吧！前端

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Web Dojo Code</title>
    <style>
      .down_banner{height: 254px;background:red url("../img/down_banner.png") no-repeat scroll center top;font-size:0;}
      .down_banner p{text-align: center;display: inline-block;width: 100%;font-size: 16px;color: #ffffff;padding-bottom: 20px;padding-top: 125px;}
      .down_banner form label{display: inline-block;width: 100%;text-align: center}
      .down_banner form label input[type="text"]{background: #fff;width: 420px;height: 42px;line-height: 42px;
      text-indent: 25px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 0;font-size: 16px;color: #0d36b6;}
      .down_banner form label input[type="submit"]{width: 70px;background-color: #0c78ee;border-top-right-radius: 5px;border: 0;border-bottom-right-radius: 5px;
      color: #fff;font-size: 18px;height: 40px;line-height: 40px;}
    </style>
  </head>
  <body>
    <div class="down_banner">
    <p>
        下載中心
    </p>
    <form action="">
        <label>
            <input type="text" placeholder="請輸入標題或者關鍵字進行搜索">
            <input type="submit" value="搜索">
        </label>
    </form>
</div>
  </body>
</html>

　　歡迎加入前端技術交流qq羣:370200203; : ) 歡迎歡迎！熱烈歡迎！
ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。