鍍金池/ 問答/HTML/ 搜索框css問題

搜索框css問題

問題描述

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

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

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

相關代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

.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>

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

就是右邊的這個小黑邊
圖片描述

回答
編輯回答
好難瘦

*{

  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在點擊時出現(xiàn)邊框

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

2017年4月6日 11:10
編輯回答
尕筱澄

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

2018年1月16日 12:12
編輯回答
做不到

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

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 所以超出父級
2018年8月29日 11:05