我正在尝试在网页上设置固定的标题,即即使滚动时也应始终保持可见。请注意,我的页面是固定宽度(800px),并且在屏幕上水平居中。

我尝试过的

<header class="noselect" style="position:fixed; top:0px; height:70px;
                                background-color:#222D2D; margin:auto;">
  <p>
    <!-- header stuff goes here -->
  </p>
</header>
<div class="separator clearfloat" style="position:fixed; top:71px; height:1px;">
</div>


分隔符是一条水平线,应贯穿屏幕的整个宽度,请参见页脚。

问题:
 1.使用position:fixed还将其置于左= 0,而不是居中。
 2.分隔符不显示。

我可以通过将分隔符放置在标题中来使其可见,但是宽度限制为800px:

<header class="noselect" style="position:fixed; top:0px; height:70px;
                                background-color:#222D2D; margin:auto;">
  <p>
    <!-- header stuff goes here -->
  </p>
  <div class="separator clearfloat"></div>
</header>


测试页为here
我该如何解决?

最佳答案

我会将父元素定位为固定的,将header置于margin: 0 auto;的中心

jsFiddle Demo

HTML:

<div id="top">
    <header>Header</header>
</div>

<main>
    <!-- Lots of content here. -->
</main>


CSS:

#top {
    position: fixed;
    left: 0; top: 0px; right: 0;
    z-index: 1;
    /* The below styling is here for illustrative purpose only. */
    border-bottom: 1px solid #c1c1c1;
    background: #fff;
    opacity: 0.9;
}

#top header,
main {
    width: 500px;
    margin: 0px auto;
}

#top header {
    height: 100px;
    /* Border styling is here for illustrative purpose only. */
    border-left: 1px dashed #c1c1c1;
    border-right: 1px dashed #c1c1c1;
}

main { margin-top: 100px; /* Should be the same as '#top header' height. */ }

关于css - 如何在CSS中修复网页标题?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25501419/

10-12 12:25
查看更多