0

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

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

谢谢。

4

3 回答 3

0

首先，我认为在段落字段中容纳输入字段的形式不合适，我会将它们放在 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>
于 2013-07-09T01:06:21.580 回答
0

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

search-input {
    position: relative;
    bottom: -9px;
    right: -17px;
}
于 2013-07-09T01:13:07.403 回答
0

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

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

于 2013-07-09T02:18:33.620 回答