搜索栏的定位 [英] Positioning of Search Bar
问题描述
我使用我的网站代码注入点插入了一个搜索栏,现在尝试将其重新定位在我的网站标签行下方.下面是我正在尝试完成的屏幕截图.
I have inserted a search bar by using my websites code injection points and now trying to re position it below my site tag line. Below in an screenshot of what I am trying to accomplish.
我的网站是 www.jobspark.ca
My website is www.jobspark.ca
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#banner-area").prepend("<div id='banner-tagline'>Your British Columbia and Alberta Job Search</div>");
});
</script>
<div class="positionedSearch"></div>
搜索栏的当前 CSS 包括
Current CSS for the search bar includes
.positionedSearch {
width: 400px;
height: 45px;
}
推荐答案
我建议实际上将它放在 HTML 中您想要放置的位置,而不是从其他位置放置...
I suggest actually putting it in the HTML where you want it placed, as opposed to positioning it from another place...
您可以使用:
.positionedSearch {
width: 400px;
height: 45px;
position: absolute;
z-index: 2;
left: 40%;
top: 330px;
}
这仅适用于全屏媒体查询.需要针对较小的屏幕进行调整.
This only works for the full screen media query. Needs to be adjusted for the smaller screens.
就像我说的,通过JS把它放在那个相对区域会好得多..那么你可以避免使用绝对定位.
Like I said, it would be much better just to place it in that relative area via the JS.. then you can avoid using absolute positioning.
基于您的另一个问题:
在您的 CSS 中找到这一行并将其修改为:
Find this line in your CSS and modify it to this:
.sqs-search-ui-button-wrapper {
background: rgba(255, 255, 255, 0.66);
max-width: 280px;
}
这篇关于搜索栏的定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!