这是标题栏的 html:
<div class="header-container">
<img class="logo" src="/images/logo.png" width="102" height="31" alt="Logo" />
<input type="text" id="header-search-input" placeholder="Search" />
<div class="right-container">
<a href="/logout/" class="right">Logout</a>
<a href="/" class="right">Home</a>
</div><!-- .right-container ends -->
</div><!-- .header-container ends -->
这是CSS:
.header-container {
position: fixed;
top: 0;
background-color: #FFFFFF;
width: 100%;
z-index: 2000;
height: 57px;
}
.right-container {
float: right;
margin-right: 200px;
position: fixed;
}
.right {
float: right;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #516475;
display: block;
font-weight: bold;
padding-top: 19px;
padding-right: 10px;
padding-bottom: 19px;
padding-left: 10px;
}
.right:hover {
float: right;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #21964F;
color: #FFF;
background-color: #21A559;
}
.logo{
margin-top: 12px;
margin-left: 200px;
}
#header-search-input{
color: #424A61;
border: thin solid #CCCCCC;
font-size: 14px;
height: 26px;
padding-right: 7px;
padding-left: 7px;
margin: 0px;
position: fixed;
}
这里是 jsFiddle
当窗口变小时,标签会移出它。我希望它们固定在 header 内。
最佳答案
好吧,其他元素会妨碍您,但您所说的只是 <a>
秒。这是修复:
CSS:
.right-container {
position: absolute;
top: 0;
overflow: hidden;
right: 5%;
}
Live demo
如果您需要更具体的定制,请告诉我,以便我帮助您实现最终目标。
显然,数字可以根据您的需要进行调整(right: 10%;
/right: 20%;
/等)
关于html - 使用 html 和 css 创建固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20814820/