搜索框css問題

問題描述

今天在做搜索框的時(shí)候遇到一個(gè)問題,具體見代碼,左右兩塊都用的浮動(dòng)來做,但是為什么沒有填充滿,會(huì)有一個(gè)小黑條呢?

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

我知道,如果把背景色和邊框設(shè)置為一樣的顏色就可以解決,就是想知道,為什么會(huì)顯現(xiàn)這個(gè)小黑條

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

就是右邊的這個(gè)小黑邊
圖片描述

回答

編輯回答

好難瘦

  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
把盒模型更改一下

2017年10月14日 05:14

編輯回答

離觴

【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 >搜索框css問題</a></h2>
</body>
</html>

2018年8月6日 14:17

編輯回答

別傷我

button在點(diǎn)擊時(shí)出現(xiàn)邊框

https://blog.csdn.net/qq_2694...

2017年4月6日 11:10

編輯回答

尕筱澄

拋開問題，你貼的代碼實(shí)現(xiàn)的效果應(yīng)該和你貼的圖片不一致吧？
input 和 button 如果設(shè)置了 padding ,默認(rèn)盒模型下再將其分別設(shè)置 80% 20% 兩者是不能占據(jù)一行的
問題解決思路應(yīng)該考慮盒模型上
box-sizing: border-box;

2018年1月16日 12:12

編輯回答

做不到

這個(gè)樣式代碼應(yīng)該得不到這種效果吧？加了float:left;又加display:block?然后還顯示在一行了？
關(guān)于寬度分配，加了padding/border 還設(shè)置百分比?至少給每一個(gè)標(biāo)簽加一個(gè)box-sizing: border-box; 不然根本達(dá)不到你要的效果

2018年2月20日 17:07

編輯回答

夢若殤

解決方法
.search-bar input, .search-bar button 添加
box-sizing: border-box; 

問題所在
.search-bar input, .search-bar button 
自身都有padding加上自身寬度的80% 20% 正常是 寬度是=80%+20%+padding 所以超出父級(jí)

2018年8月29日 11:05