css searchbox没有设置在适当的位置

Question

在Css searchbox中，我获得了额外的空间，如下所示： -

我的jsfiddle链接是： -

Jsfiddle link

我做错了什么？

Answer 1

将css从35％更改会影响搜索框。 如果你把它改成px，我想它可能是有用的。 我将它更改为大约300px，并用按钮覆盖了那个空白区域。 里面.search-wrapper按钮{}。 删除边界半径可能会有所帮助。

Answer 2

请尝试以下操作： Demo

.search-wrapper input {
width: 74%; /* changed width */
.....
}

.search-wrapper button {   
 position: absolute; 
 width: 15%; /* changed position to absolute and width */
 ........
 }

希望这就是你想要的。

Answer 3

您的问题与box-sizing有关。

您应该将box-sizing: border-box;应用于input，以便宽度从计算中排除padding-left和padding-right。

.search-wrapper input {
    width: 60%; /* Keep this at 60% */
    padding: 10px 5px;
    float: left;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #EEE;
    border-radius: 3px 0 0 3px;
    box-sizing: border-box;  /* Apply box-sizing to be on the border box */
}

然后，您可以在按钮上设置width: 40%;。

.search-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 40%; /* Set to 40% */
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: white;
    text-transform: uppercase;
    background: #D83C3C;
    border-radius: 0 3px 3px 0;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

现在，您的输入宽度（60％）+按钮宽度（40％）= 100％。

Answer 4

.search-wrapper input {
    width: 63%;
    padding: 10px 5px;
    float: left;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #EEE;
    border-radius: 3px 0 0 3px;
}

更改搜索框宽度