html - 向右浮动后，表单标签位于表单边框之外

Question

我尝试在 div 容器内 float 一个表单。该表单包含两个输入:标签和按钮。之后我注意到表格边框外的两个标签；不在里面。如何解决这个问题呢？ 代码如下: html

<div class="container">
        <a href="index.php"><img id="brand" alt="brand" src="img/brand1.png"></a>
        <form id="search-form" class="ccc">
            <input id="search-field"  name="s" placeholder="Find apartments (enter city, zip, state or country)" class="search-form_it" type="text"></input>
            <input id="search-button" type="submit" value=""><i class="fa fa-search"></i></input>
        </form>
</div>

CSS

#search-field{
border: medium none;
margin-top:25px;
margin-right:25px;
background-color: transparent;
max-width:350px;
width:100%;
height: 50px;
box-shadow: none;
font-size: 12px;
color: #F04122;
padding: 6px 10px !important;
box-sizing: border-box;
}
#search-button{
position:absolute;
display:block;
right: 50px;    
border: medium none;
background-color: transparent;
}
#search-form{
position:relative;
display:block;
max-width: 500px;
width: 100%;
height:30px;
display:inline;
padding:6px;
border-radius:0px;
border: 2px solid white;
float:right;}

结果是这样的

Answer 1

问题在于您的绝对定位和边距。从 #search-button 和 #search-field 的 css 中删除它们可以解决问题:

#search-field{
    border: medium none;
    background-color: transparent;
    max-width:350px;
    width:100%;
    height: 30px;
    box-shadow: none;
    font-size: 12px;
    color: #F04122;
    padding: 6px 10px !important
    box-sizing: border-box;
}
#search-button{
    display:block;
    float: right;
    height:30px;
    border: medium none;
}

在 jsfiddle 上测试过，对我来说看起来不错，链接是:https://jsfiddle.net/5L0kpgpL/