Question

正确的人编写了我的第一个网站，并在此过程中遇到了一些障碍。任何帮助都非常感谢。好的，所以我一直在尝试设置我的表格（充当导航栏），以便5秒宽度相等。我已将表格宽度设置为100％，并将5个tds中的每一个设置为20％。但宽度属性不适用。所以我尝试了不同的宽度但没有适用。这是我的代码：的 HTML

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="css.css"/> 
<title>First Website</title>

    </head>

    <body>

        <section class="header">

        <header>
<a href=""><img src="Cantpostimagehere"/></a>
</header>

        </section>

        <section class="navbar">

        <nav>

            <table>

                <tr>

                    <td><a href="">About Me</a></td>

                    <td><a href="">Funny stuff</a></td>

                    <td><a href="">Home</a></td>

                    <td><a href="">Cool Pictures</a></td>

                    <td><a href="">Contact me</a></td>

                </tr>

            </table>

        </nav>

        </section>

        <section class="main">

            <img src="Cantpostimagehere"/>

        </section>

    </body>

</html>

CSS

.header img{

    display:block;
    margin:0 auto;

    width:50%;

    padding:0 0 5px 0;

}
.navbar td{
text-align:center;
    width:20%;

}

.navbar a:link{

    color:gray;

    text-decoration:none;

}

.navbar a:visited{

    color:gray;

    text-decoration:none;

}

.navbar a:hover{

    color:purple;

    font-weight:bolder;


}

.navbar table{

    position:fixed;
    width:100%;

    display:block;

    margin:0 auto;

    background-color:#cccccc;

    padding:10px;

    border:2px solid #999999;

}

.main img{
    width:90%;

    display:block;

    margin:10px auto;

    padding:2px;

    border:4px solid #999999;

}

Answer 1

您已将display:block应用于您的表格，以便td正确填充空间，其父级（表格）需要设置为display:table

编辑。谢谢@Oriol

表数据宽度不适用

1 个答案: