所以我显然不是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
我很想知道如何修复它并让我的任何不良做法向我暗示。
谢谢。
So I am obviously not super advanced in CSS but usually I can figure these out on my own, not this time though.
I am trying to have my search button float:left of my input field, all this is happening in an absolute position in my header.
Although I'm sure I may use some improper shortcuts to align my stuff the way I want, I did manage to have it display on explorer but it doesn't work on chrome (and apparently firefox too)
The html relevant to my problem:
<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>and the 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 }Or if the problem is deeper down, here is the link to my practice folder: http://www.gfortin.com/css_practice/page.html
I would love to know how to fix it and to have any of my bad practices hinted out to me.
Thanks.
最满意答案
我想你是在下面的CSS之后。 一旦您将父容器#search-bar定位，通过将位置设置为绝对，您需要相对于它定位子项，因此将位置设置在下方。
search-input { position: relative; bottom: -9px; right: -17px; }I think you are after the CSS below. Once you make parent container #search-bar positioned, by setting the position to absolute as you have done, you need to position children relative to it hence position relative below.
search-input { position: relative; bottom: -9px; right: -17px; }更多推荐
发布评论