问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

搜索框css问题

头像
sudianyao
    7136

    问题描述

    今天在做搜索框的时候遇到一个问题,具体见代码,左右两块都用的浮动来做,但是为什么没有填充满,会有一个小黑条呢?

    问题出现的环境背景及自己尝试过哪些方法

    我知道,如果把背景色和边框设置为一样的颜色就可以解决,就是想知道,为什么会显现这个小黑条

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）

    .search-bar {
    width:600px;
    border: 2px solid #dd182b;
    background: black;
}
.search-bar input,
.search-bar button {
    border: 0px;
    padding: 10px;
    float: left;
    display: block

}
.search-bar input {
    width: 80%;
}
.search-bar button {
    /* outline: none; */
    width: 20%;
    background: #dd182b;
    color: #fff;
}
        <div class="search-bar">
        <input type="text" name="" value="">
        <button type="button" name="button">搜索</button>
    </div>

    你期待的结果是什么？实际看到的错误信息又是什么？

    就是右边的这个小黑边
    图片描述

    htmlcss
    阅读 3.9k
    6 个回答
    得票最新
    头像
    毛瑞
      2.8k26

      【CSS】搜索组合框样式 思否问题

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base target="_blank" />
    <title>三十客 - 搜索组合框样式 思否问题</title>
    <style>
        .search-bar {
            width:600px;
            border: 2px solid #dd182b;
            height: 38px;
        }
        .search-bar input,.search-bar button {
            border: 0px;
            padding: 10px;
            float: left;
        }
        .search-bar input {
            width: 80%;
            box-sizing:border-box;
        }
        .search-bar button {
            width: 20%;
            background: #dd182b;
            color: #fff;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div class="search-bar">
        <input type="text" name="" value="">
        <button type="button" name="button">搜索</button>
    </div>
    <h2><a href="https://segmentfault.com/q/1010000016022135">搜索框css问题</a></h2>
</body>
</html>
      头像
      yanzhang146
        11
        新手上路，请多包涵

        *{

          padding: 0;
  margin: 0;
  box-sizing: border-box;
}
把盒模型更改一下
        头像
        画师的星空
          818139
          头像
          ShiRouMi
            43822149

            抛开问题，你贴的代码实现的效果应该和你贴的图片不一致吧？
            input 和 button 如果设置了 padding ,默认盒模型下再将其分别设置 80% 20% 两者是不能占据一行的
            问题解决思路应该考虑盒模型上
            box-sizing: border-box;

            头像
            babe
              963129

              这个样式代码应该得不到这种效果吧？加了float:left;又加display:block?然后还显示在一行了？
              关于宽度分配，加了padding/border 还设置百分比?至少给每一个标签加一个box-sizing: border-box; 不然根本达不到你要的效果

              头像
              瘦子江
                346112
                解决方法
.search-bar input, .search-bar button 添加
box-sizing: border-box; 

问题所在
.search-bar input, .search-bar button 
自身都有padding加上自身宽度的80% 20% 正常是 宽度是=80%+20%+padding 所以超出父级
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                被 1 篇内容引用
                推荐问题