HTML5给submit按钮设置背景色，背景色不会完全填充是为什么？,Web开发,技术交流,鱼C论坛

liumoc 发表于 2018-8-15 01:03:39

HTML5给submit按钮设置背景色，背景色不会完全填充是为什么？

如图，想设置一个搜索框但是写出来后蓝色的背景底色底部总有缝隙。这是怎么回事啊，已经设置了border： 0；

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

/*搜索栏部分*/
   input {
         border: 0;
         box-sizing: border-box;/*width不包括padding和border*/
   }
   .search {
         width: 410px; /*360+50*/
         height: 38px;
         border: 1px solid #00a4ff;
         float: left;
   }
   .search input {/*属性选择器*/
         width: 360px;
         height: 38px;
         float: left;
         padding-left: 20px;
   }
   .search input {
         width: 50px;
         height: 38px;
         background: #00a4ff url(images/search_06.png) no-repeat center center;
         float: left;
         /*这里因为a和input为行内块元素它们之间在行内排列时是有空隙的，而用浮动则不会有空隙*/
   }

HTML部分：


<div class="search">
<form action="#">
<input type="text" placeholder="请输入内容">
<input type="submit" value="" >

</form>

</div>

liumoc 发表于 2018-8-15 01:06:09

{:5_99:}{:5_99:}HTML查错好难啊，感觉比编程语言还难，起码编程语言编译的时候会报错，有错误是不会通过的

liumoc 发表于 2018-8-15 01:07:39

拜托了{:5_92:}

不二如是 发表于 2018-8-15 09:21:19

1、目前的效果：

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索栏</title>
<style>
   /*搜索栏部分*/
   input {
         border: 0;
         box-sizing: border-box;/*width不包括padding和border*/
   }
   .search {
         width: 410px; /*360+50*/
         height: 38px;
         border: 1px solid #00a4ff;
         float: left;
   }
   .search input {/*属性选择器*/
         width: 360px;
         height: 38px;
         float: left;
         padding-left: 20px;
   }
   .search input {
         width: 50px;
         height: 38px;
         background: #00a4ff url(images/search_06.png) no-repeat center center;
         float: left;
         /*这里因为a和input为行内块元素它们之间在行内排列时是有空隙的，而用浮动则不会有空隙*/
   }
</style>
</head>
<body>

<div class="search">
<form action="#">
   <input type="text" placeholder="请输入内容">
   <input type="submit" value="" >
   
</form>

</div>
</body>
</html>

alltolove 发表于 2018-8-15 09:36:14

把margin和padding还有border-width设置成0试试

liumoc 发表于 2018-8-15 09:55:20

不二如是发表于 2018-8-15 09:21
1、目前的效果：

我把图片素材去掉以后还是会有缝隙，这是一个导航栏案例，完整的代码在下面，是否是其它地方的问题呢

liumoc 发表于 2018-8-15 09:57:24

把素材去掉以后仍然会出现缝隙。

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>

<style type="text/css">
/*初始化*/
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
text-decoration: none;
color: #050505;
display: inline-block;
}
input {
border: 0;
box-sizing: border-box;/*width不包括padding和border*/
}
body {
background-color: #f3f5f7;/* 整个页面的背景色 */
}
/*页面头部分*/
header {
height: 100px;
overflow: hidden;/*发生塌陷在父级盒子添加overflow: hidden;*/
}
nav {
height: 42px;
width: 1366px;
margin: 30px auto 0px;
}
/*logo部分*/
.logo {
float: left;
}
/*navbar部分*/
.navbar {
float: left;
margin-left: 65px;
height: 42px;
line-height: 42px; /* 写在父亲里就不用给每个li写了*/
}
.navbar li {
/*height: 42px;
line-height: 42px;行高可以继承，所以这两句话给父亲也是相同的效果*/
padding: 0px 18px; /* padding一般不要给上下，只给左右*/
float: left;
}
.navbar li a:hover {
border-bottom: 2px solid #00a4ff;
}
/*搜索栏部分*/
.search {
width: 410px; /*360+50*/
height: 38px;
border: 1px solid #00a4ff;
float: left;
}
.search input {/*属性选择器*/
width: 360px;
height: 38px;
float: left;
padding-left: 20px;
}
.search input {
width: 50px;
height: 38px;
background-color: #00a4ff;
/*background-image: url(images/search_06.png);
background-repeat: no-repeat; 背景平铺为background-repeat，background-attachment为附着
background-position: center center;*/
/*background: #00a4ff url(images/search_06.png) no-repeat center center;*/
float: left;
/*这里因为a和input为行内块元素它们之间在行内排列时是有空隙的，而用浮动则不会有空隙*/
}
</style>
</head>
<body>


<header>
<nav>

<div class="logo"> 
<img src="images/logo_03.png" alt="logo" />
</div>

<div class="navbar"> 
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>

<div class="search">
<form action="#">
<input type="text" placeholder="请输入内容">
<input type="submit" value="" >

</form>

</div>
</nav>
</header>
</body>
</html>

liumoc 发表于 2018-8-15 10:02:03

alltolove 发表于 2018-8-15 09:36
把margin和padding还有border-width设置成0试试

测试过了，没用，这些代码其实我是写过的

liumoc 发表于 2018-8-15 10:25:42

不二如是发表于 2018-8-15 09:21
1、目前的效果：

我用火狐测试了一下，是正常的，但是chrome就会出错。{:5_99:}

页: [1]

鱼C论坛's Archiver

HTML5给submit按钮设置背景色，背景色不会完全填充是为什么？