Question

所以我显然不是非常先进的CSS，但通常我可以自己解决这些问题，但不是这次。

我想让我的搜索按钮浮动：输入字段的左侧，所有这些都发生在我标题中的绝对位置。

虽然我确定我可能会使用一些不正确的快捷方式来按照我想要的方式对齐我的东西，但我确实设法将它显示在资源管理器上，但它不适用于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

首先，我不认为在段落字段中存放输入字段是正确的形式，我会将它们放在div中，但它似乎正在运行，因此这将是您的选择。

所以，这不是一个CSS问题，因为它是一个HTML问题。如果你看一下HTML的结构，你实际上在DOM中的.submit类之前有.search类 - 这意味着当放置这些元素时，.search类将放在第一位。

如果您要在HTML中切换展示位置，则应该可以轻松修复。我认为这只是你在CSS中寻找解决方案而不是HTML的案例。

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

Answer 2

我认为你是在追随CSS。一旦您将父容器#search-bar定位，通过将位置设置为绝对，您需要相对于它定位子项，因此相对位于下方。

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

Answer 3

啊，所以在你的网站上你没有指定一个表单宽度，所以它内部相对定位的元素（.search和.submit）将堆叠，因为表单宽度默认是继承的。

因此，如果您选择带有css的表单并添加一个width: 460px，它应该允许输入都是内联的。我认为IE解释这种情况的方式不同于Chrome和Firefox，这就是为什么可能在那里工作的。

Chrome中的CSS浮动输入和提交按钮

3 个答案: