鱼C论坛

 找回密码
 立即注册
查看: 4540|回复: 8

[已解决]HTML5给submit按钮设置背景色,背景色不会完全填充是为什么?

[复制链接]
发表于 2018-8-15 01:03:39 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
如图,想设置一个搜索框 但是写出来后蓝色的背景底色底部总有缝隙。这是怎么回事啊,已经设置了border: 0;
未标题-1.jpg

关于搜索栏部分的css代码为:

  1. /*搜索栏部分*/  
  2.         input {  
  3.             border: 0;  
  4.             box-sizing: border-box;  /*width不包括padding和border*/  
  5.         }  
  6.         .search {  
  7.             width: 410px; /*360+50*/  
  8.             height: 38px;  
  9.             border: 1px solid #00a4ff;  
  10.             float: left;  
  11.         }  
  12.         .search input[type=text] {  /*属性选择器*/  
  13.             width: 360px;  
  14.             height: 38px;  
  15.             float: left;  
  16.             padding-left: 20px;  
  17.         }  
  18.         .search input[type=submit] {  
  19.             width: 50px;  
  20.             height: 38px;  
  21.             background: #00a4ff url(images/search_06.png) no-repeat center center;  
  22.             float: left;  
  23.             /*这里 因为a和input为行内块元素 它们之间在行内排列时是有空隙的,而用浮动则不会有空隙*/  
  24.         }
复制代码



HTML部分:

  1. <!-- 搜索栏部分 -->
  2.                         <div class="search">
  3.                                 <form action="#">
  4.                                         <input type="text" placeholder="请输入内容"  >
  5.                                         <input type="submit" value="" >
  6.                                         <!-- value里不写属性值时会隐藏提交二字         -->
  7.                                 </form>
  8.                        
  9.                         </div>
复制代码
最佳答案
2018-8-15 09:21:19
1、目前的效果:
Snip20180815_15.png


鱼油描述的问题:蓝色的背景底色底部总有缝隙。

从上图看起来很正常,我这边没有倒入图片,单纯的H5+C3布局没有问题。

可能是你的图片素材有问题,建议手动PS检查下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜索栏</title>
  6.     <style>
  7.         /*搜索栏部分*/
  8.         input {
  9.             border: 0;
  10.             box-sizing: border-box;  /*width不包括padding和border*/
  11.         }
  12.         .search {
  13.             width: 410px; /*360+50*/
  14.             height: 38px;
  15.             border: 1px solid #00a4ff;
  16.             float: left;
  17.         }
  18.         .search input[type=text] {  /*属性选择器*/
  19.             width: 360px;
  20.             height: 38px;
  21.             float: left;
  22.             padding-left: 20px;
  23.         }
  24.         .search input[type=submit] {
  25.             width: 50px;
  26.             height: 38px;
  27.             background: #00a4ff url(images/search_06.png) no-repeat center center;
  28.             float: left;
  29.             /*这里 因为a和input为行内块元素 它们之间在行内排列时是有空隙的,而用浮动则不会有空隙*/
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <!-- 搜索栏部分 -->
  35. <div class="search">
  36.     <form action="#">
  37.         <input type="text" placeholder="请输入内容"  >
  38.         <input type="submit" value="" >
  39.         <!-- value里不写属性值时会隐藏提交二字         -->
  40.     </form>

  41. </div>
  42. </body>
  43. </html>
复制代码




想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-8-15 01:06:09 | 显示全部楼层
HTML查错好难啊,感觉比编程语言还难,起码编程语言编译的时候会报错,有错误是不会通过的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-15 01:07:39 | 显示全部楼层
拜托了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-15 09:21:19 | 显示全部楼层    本楼为最佳答案   
1、目前的效果:
Snip20180815_15.png


鱼油描述的问题:蓝色的背景底色底部总有缝隙。

从上图看起来很正常,我这边没有倒入图片,单纯的H5+C3布局没有问题。

可能是你的图片素材有问题,建议手动PS检查下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜索栏</title>
  6.     <style>
  7.         /*搜索栏部分*/
  8.         input {
  9.             border: 0;
  10.             box-sizing: border-box;  /*width不包括padding和border*/
  11.         }
  12.         .search {
  13.             width: 410px; /*360+50*/
  14.             height: 38px;
  15.             border: 1px solid #00a4ff;
  16.             float: left;
  17.         }
  18.         .search input[type=text] {  /*属性选择器*/
  19.             width: 360px;
  20.             height: 38px;
  21.             float: left;
  22.             padding-left: 20px;
  23.         }
  24.         .search input[type=submit] {
  25.             width: 50px;
  26.             height: 38px;
  27.             background: #00a4ff url(images/search_06.png) no-repeat center center;
  28.             float: left;
  29.             /*这里 因为a和input为行内块元素 它们之间在行内排列时是有空隙的,而用浮动则不会有空隙*/
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <!-- 搜索栏部分 -->
  35. <div class="search">
  36.     <form action="#">
  37.         <input type="text" placeholder="请输入内容"  >
  38.         <input type="submit" value="" >
  39.         <!-- value里不写属性值时会隐藏提交二字         -->
  40.     </form>

  41. </div>
  42. </body>
  43. </html>
复制代码




想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-15 09:36:14 | 显示全部楼层
把margin和padding还有border-width设置成0试试
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-15 09:55:20 | 显示全部楼层

我把图片素材去掉以后还是会有缝隙,这是一个导航栏案例,完整的代码在下面,是否是其它地方的问题呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-15 09:57:24 | 显示全部楼层
把素材去掉以后仍然会出现缝隙。
001.jpg


完整的代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>demo</title>
  6.         <!-- 样式 -->
  7.         <style type="text/css">
  8.                 /*初始化*/
  9.                 * {
  10.                         margin: 0px;
  11.                         padding: 0px;
  12.                 }
  13.                 ul {
  14.                         list-style: none;
  15.                 }
  16.                 .clearfix:before, .clearfix:after {
  17.                         display: table;
  18.                         content: "";
  19.                 }
  20.                 .clearfix:after {
  21.                         clear: both;
  22.                 }
  23.                 .clearfix {
  24.                         *zoom: 1;
  25.                 }
  26.                 a {
  27.                         text-decoration: none;
  28.                         color: #050505;
  29.                         display: inline-block;
  30.                 }
  31.                 input {
  32.                         border: 0;
  33.                         box-sizing: border-box;  /*width不包括padding和border*/
  34.                 }
  35.                 body {
  36.                                 background-color: #f3f5f7;  /* 整个页面的背景色 */
  37.                         }
  38.                 /*页面头部分*/
  39.                 header {
  40.                         height: 100px;
  41.                         overflow: hidden;  /*发生塌陷在父级盒子添加overflow: hidden;*/
  42.                 }
  43.                 nav {
  44.                         height: 42px;
  45.                         width: 1366px;
  46.                         margin: 30px auto 0px;
  47.                 }
  48.                 /*logo部分*/
  49.                 .logo {
  50.                         float: left;
  51.                 }
  52.                 /*navbar部分*/
  53.                 .navbar {
  54.                         float: left;
  55.                         margin-left: 65px;
  56.                         height: 42px;
  57.                         line-height: 42px; /* 写在父亲里就不用给每个li写了*/
  58.                 }
  59.                 .navbar li {
  60.                         /*height: 42px;
  61.                         line-height: 42px;  行高可以继承,所以这两句话给父亲也是相同的效果*/
  62.                         padding: 0px 18px; /* padding一般不要给上下,只给左右*/
  63.                         float: left;
  64.                 }
  65.                 .navbar li a:hover {
  66.                         border-bottom: 2px solid #00a4ff;
  67.                 }
  68.                 /*搜索栏部分*/
  69.                 .search {
  70.                         width: 410px; /*360+50*/
  71.                         height: 38px;
  72.                         border: 1px solid #00a4ff;
  73.                         float: left;
  74.                 }
  75.                 .search input[type=text] {  /*属性选择器*/
  76.                         width: 360px;
  77.                         height: 38px;
  78.                         float: left;
  79.                         padding-left: 20px;
  80.                 }
  81.                 .search input[type=submit] {
  82.                         width: 50px;
  83.                         height: 38px;
  84.                         background-color: #00a4ff;  
  85.                         /*background-image: url(images/search_06.png);
  86.                         background-repeat: no-repeat; 背景平铺为background-repeat,background-attachment为附着
  87.                         background-position: center center;*/
  88.                         /*background: #00a4ff url(images/search_06.png) no-repeat center center;*/
  89.                         float: left;
  90.                         /*这里 因为a和input为行内块元素 它们之间在行内排列时是有空隙的,而用浮动则不会有空隙*/
  91.                 }
  92.         </style>
  93. </head>
  94. <body>
  95.         <!-- 结构 -->
  96.         <!--页面头部分-->
  97.         <header>  <!-- 头部就用和header 语义化标签 -->
  98.                 <nav>
  99.                         <!-- logo部分 -->
  100.                         <div class="logo"> <!--  添加logo图片 -->
  101.                                 <img src="images/logo_03.png" alt="logo" />
  102.                         </div>
  103.                         <!-- navbar部分 -->
  104.                         <div class="navbar"> <!--首页课程等选项地方-->
  105.                                 <ul>
  106.                                         <li><a href="#">首页</a></li>
  107.                                         <li><a href="#">课程</a></li>
  108.                                         <li><a href="#">职业规划</a></li>
  109.                                 </ul>
  110.                         </div>
  111.                         <!-- 搜索栏部分 -->
  112.                         <div class="search">
  113.                                 <form action="#">
  114.                                         <input type="text" placeholder="请输入内容"  >
  115.                                         <input type="submit" value="" >
  116.                                         <!-- value里不写属性值时会隐藏提交二字         -->
  117.                                 </form>
  118.                        
  119.                         </div>
  120.                 </nav>
  121.         </header>
  122. </body>
  123. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-15 10:02:03 | 显示全部楼层
alltolove 发表于 2018-8-15 09:36
把margin和padding还有border-width设置成0试试

测试过了,没用,这些代码其实我是写过的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-8-15 10:25:42 | 显示全部楼层

我用火狐测试了一下,是正常的,但是chrome就会出错。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 22:28

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表