html - 使用 html 和 css 创建固定标题

Question

这是标题栏的 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 内。

Answer 1

好吧，其他元素会妨碍您，但您所说的只是 <a>秒。这是修复:

CSS:

.right-container {
    position: absolute;
    top: 0;
    overflow: hidden;
    right: 5%;
}

Live demo

如果您需要更具体的定制，请告诉我，以便我帮助您实现最终目标。

显然，数字可以根据您的需要进行调整(right: 10%;/right: 20%;/等)