我有一个包含图片和搜索框的标题。标题区域和结果区域都是单独的divs
。
搜索框位于标题区域中。在结果div的左侧有一些菜单项。我需要将搜索框与结果开始区域对齐。
在.tk-bl-header
我添加了margin-left = 5em来工作。但是当我移动到不同的屏幕分辨率时,它会变得不对齐。
.tk-bl-header .tk-header-search-area {
display: inline-block;
float: left;
width: 43.75%;
padding-left: 1.5625%;
padding-right: 1.5625%;
position: relative;
color: black;
margin-left: 5em;
}
.searchform-container .searchform {
margin-bottom: 1em;
}
header .tk-bl-header h1 #logo a {
text-decoration: none;
}
a.library-logo {
background: url("../abc.jpg") no-repeat scroll left top transparent;
width: 110px;
height: 100px;
}
a.logo-name {
margin-top: 10px;
font-size: 20px;
}
div#second-header {
display: inline-block;
height: 65px;
position: relative;
width: 100%;
/* overflow: hidden; */
}

<header class="tk-bl-header">
<div id="second-header">
<h1 id="logo">
<a href="http://example.com" target="_blank" class="library-logo"></a>
<a href="${pageContext.servletContext.contextPath}" class="logo-name">ABCD</a>
</h1>
<div class="tk-header-search-area">
<div class="tk-header-search-form">
<div class="searchform-container ">
<form id="" class="searchform" action="" method="get" data-filters="">
<fieldset>
<legend>Search</legend>
<input type="text" name="q" class="query" value='${query.value.display}' placeholder="Search documents.." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
<input type="submit" class="submit" value="Search">
</fieldset>
</form>
</div>
</div>
</div>
<div id="col-right-top" class="sidebar col"></div>
</div>
</header>
&#13;