html - Chrome 中的 CSS float 输入和提交按钮

Question

所以我显然在 CSS 方面不是特别高级，但通常我可以自己解决这些问题，但这次不行。

我试图让我的搜索按钮 float :输入字段的左侧，所有这些都发生在我的标题中的绝对位置。

虽然我确定我可能会使用一些不正确的快捷方式来按照我想要的方式对齐我的东西，但我确实设法让它显示在资源管理器上，但它在 chrome(显然也是 firefox)上不起作用

与我的问题相关的 html:

    <div id="search-bar">
                    <div id="search-input">
                        <form action="#" method="get">
                            <p class="search"> 
                                <input type="text" name="search" id="search" />
                            </p>
                            <p class="submit"> 
                                <input type="submit" value="Search" />
                            </p>
                            <div class="clear"></div>
                        </form>
                    </div>
                </div>

和CSS:

#search-input p{
margin:0;
padding:0;
border:0;
outline:0;
}

#search-bar{
position:absolute;
bottom: -10px;
right:0;
height: 55px;
width: 500px;
background: #e6e5e5;
border-radius: 10px;
}
#search-input{
position:absolute;
bottom: 10px;
right: 20px;
}

#search-input #search{
float:left
}

#search-input .submit input{
float:left
}

input{     
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 370px;
    padding: 8px;
    background: #FFFFFF;  
}  

input:hover, input:focus {   
    border-color: #C9C9C9;   
} 

.submit input {  
    width: auto;  
border: solid 1px #617798;
    background: #617798;  

font-size: 14px;  
    color: #FFFFFF;  
}

.submit input:hover {  
    background: #7187a8
}

或者如果问题更深层次，这里是我的练习文件夹的链接:http://www.gfortin.com/css_practice/page.html

我很想知道如何解决这个问题，并向我提示我的任何不良做法。

谢谢。

Answer 1

我认为您正在寻找下面的 CSS。一旦你使父容器#search-bar 定位，通过将位置设置为绝对位置，你需要相对于它定位子容器，因此相对于下面的位置。

search-input {
    position: relative;
    bottom: -9px;
    right: -17px;
}