Question

你好我做了一个简单的布局，我还在顶部显示了一个导航栏（固定）一切都很顺利，但导航栏中我想要的文字没有显示出来。我试图找到解决方案，但无法理解，非常感谢。

HTML CODE：

    <div class="banner">
    <div class="banner-container"> test test
            <tbody>
                <tr>
                <span>test</span> <span>test1</span>
                </tr>
            </tbody>


    </div>          <!-- END banner-container -->
    </div>

CSS代码：

    /*========================= BODY =========================*/
body{
    background: #ffffff;
    font-family: Hammersmith One;
    margin: 0;
}
span{
    margin: 0 10px;
}
.container{
        height:auto;
        margin-top:-10px;
}

/*========================= HEADER =========================*/
 .banner {
    margin: -10pt auto;
    width:100%;
    background-color:#d9d8d6;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    position:fixed;
}
.banner-container{
        height:70px;
        width:900px;
        position:center;
        text-align:center;
}
.wrapper{
        background-color:#FFFFFF;
        width:900px;
        margin-top: 20px;
        margin: 0pt auto;
}
/*========================= CONTENT LEFT =========================*/
.content-index{
        width:70%;
        height:100%;
        float:left;
        padding-left:20px;
        padding-top:40px;
}

.content-index h1{
        font-size:20px;
        width:98%;
        background-color:#fdfdfd;
        text-align: left;
        color:#000000;
}
.content-index p{
        text-align: left;
        margin: 10px;
        width:98%;
}


.content-index-header{
    float: left;
    margin: 1px 1px 1px 1px;
    padding: 1px;
    width:100%;
    overflow:hidden;
}
.content-index-latest{
    height:100%;
    float: left;
    margin: 1px 1px 1px 1px;
    padding: 1px;
    width:100%;
    overflow:hidden;
}
.content-index-latest-cont {
    background:#FFFFFF;
    padding: 1px;
    float: left;
    width: 100%;
}

/*========================= CONTENT RIGHT =========================*/ 
.content-index-right{
        width:25%;
        height:100%;
        float:right;
        padding-right:20px;
        padding-top:40px;
}
.content-index-right h1{
        color:#000000;
        font-size:15px;
        text-align: center;
        background-color:#fdfdfd;
}

Answer 1

只需从margin: -10pt auto;

中删除.banner即可

.banner {
    width:100%;
    background-color:#d9d8d6;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    position:fixed;
}

DEMO

Answer 2

删除横幅类的margin属性。

.banner {
   background-color: #D9D8D6;
   border-color: #000000;
   border-style: solid;
   border-width: 1px;

   position: fixed;
   width: 100%;
}

这里是DEMO

Answer 3

出于好奇，你为什么不使用没有桌子的桌子元素？

其他一些事情：

将横幅margin:-10px auto更改为margin:0 auto。现在它正在将它放在页面顶部，垂直边距为负。
从容器中删除position:center，因为这不是可接受的值。如果您想将其水平居中，请同时为其margin:0 auto。
如果这是导航，我建议使用UL（列表）方法。
对于如此少量的HTML来说，这是一个非常多的CSS。您在元素上设置的某些样式将在以后的编码中证明不是非常模块化的。

Answer 4

保证金（-10 auto）=＆gt; （-10）顶部和底部，（自动）左和右

.banner {
    width:100%;
    background-color:#d9d8d6;
    border:1px solid #000000;
    position:fixed;
}

导航栏中的文字不会显示

4 个答案: