chrome中的CSS浮动输入和提交按钮答案

【问题标题】：CSS floating input and submit button in chromechrome中的CSS浮动输入和提交按钮
【发布时间】：2013-07-09 10:18:33
【问题描述】：

所以我显然在 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

我很想知道如何解决它，并希望有人向我暗示我的任何不良做法。

谢谢。

【问题讨论】：

标签： html css google-chrome firefox input

【解决方案1】：

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

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

【讨论】：

太好了，谢谢它确实解决了 chrome 和 firefox 中的对齐问题！既然你在这里，你会不会知道为什么按钮和输入框之间有一个 2px 的游戏，而按钮似乎也高了 1px？
@gfortin13 2px between 是按钮周围的边距。 1px 是与文本框背景颜色相同的边框，请阅读浏览器使用的装箱模型。 Chrome 中的开发者工具是你的朋友会打开它们，如果你在 Windows 上的话。

【解决方案2】：

首先，我认为在段落字段中容纳输入字段的形式不合适，我会将它们放在 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>

【讨论】：

不幸的是，这不完全是我的问题，我不希望输入栏左侧的搜索按钮（虽然它很好，我可能会保持这种方式）如果你点击你可以看到的问题我的链接是搜索栏和输入字段应该不在同一行（它们在 IE 上对齐）

【解决方案3】：

啊，所以在您的网站上，您没有指定表单宽度，因此其中相对定位的元素（.search 和 .submit）将堆叠，因为默认情况下会继承表单宽度。

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

【讨论】：