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

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

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

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

x

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

关于搜索栏部分的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[type=text] {  /*属性选择器*/  
            width: 360px;  
            height: 38px;  
            float: left;  
            padding-left: 20px;  
        }  
        .search input[type=submit] {  
            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="" > 
                                        <!-- value里不写属性值时会隐藏提交二字         -->
                                </form>
                        
                        </div>

最佳答案

月排行榜 / 总排行榜

不二如是

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[type=text] {  /*属性选择器*/
            width: 360px;
            height: 38px;
            float: left;
            padding-left: 20px;
        }
        .search input[type=submit] {
            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="" >
        <!-- value里不写属性值时会隐藏提交二字         -->
    </form>

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

跳转到最佳答案楼层

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

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

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

拜托了

不二如是 · 发表于 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[type=text] {  /*属性选择器*/
            width: 360px;
            height: 38px;
            float: left;
            padding-left: 20px;
        }
        .search input[type=submit] {
            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="" >
        <!-- 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[type=text] {  /*属性选择器*/
                        width: 360px;
                        height: 38px;
                        float: left;
                        padding-left: 20px;
                }
                .search input[type=submit] {
                        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>  <!-- 头部就用和header 语义化标签 -->
                <nav>
                        <!-- logo部分 -->
                        <div class="logo"> <!--  添加logo图片 -->
                                <img src="images/logo_03.png" alt="logo" />
                        </div>
                        <!-- navbar部分 -->
                        <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="" > 
                                        <!-- 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就会出错。

账号		自动登录	找回密码
密码			立即注册