Question

我的标题（#M_header UL）比其包含的块（#M_header）宽，即使它设置为100％宽度。我刚刚开始使用％作为PX的宽度，所以我是新手。

代码：

<html>
    <body>
        <div id="container">
            <header id = "M_head">
                <h2><ul>Title</ul></h2> 
            </header>

            <nav id="M_nav">
                <ul>
                    <a href=""><li>MUSIC</li></a>
                    <a href=""><li>NEWS</li></a>
                    <a href=""><li>STORE</li></a>
                    <a href=""><li>BLOG</li></a>
                    <a href=""><li>CONTACTS</li></a>
                    <a href=""><li>ABOUT</li></a>
                </ul>
            </nav>

            <section id="M_section">
                <div id="M_stuff"></div>
            </section>
            <footer id="M_footer">

            </footer>
        </div>
    </body>
</html>

的CSS：

html, body {
    max-width:100%;
    margin:0px;
    font-size:1em;
    display:block;
}


#container {
    text-align:center;
    box-sizing:border-box;  
    margin: 0px auto;
    border:2px solid black;
    width:75%;
}

#M_head {
    color:black;
    border:2px solid blue;
    width:100%;
}

#M_head ul {
    text-align:left;
    border:2px solid blue;
}

js.fiddle：http://jsfiddle.net/65taytw6/

Answer 1

将填充值添加为0.检查以下网站。

#M_head ul {
    text-align:left;
    border:2px solid blue;
    width:100%;
    padding:0;
}

http://jsfiddle.net/65taytw6/2/

Answer 2

如果您希望UL采用与容器相同的宽度。无需指定UL的宽度。

只需在css文件中进行以下更改即可。删除宽度属性。

#M_head ul {
    border: 2px solid blue;
    text-align: left;
    /* width: 100%; */
}

Answer 3

Fiddle

#M_head ul {
    text-align:left;
    border:2px solid blue;
    width:inherit;
}

使宽度继承

Answer 4

为了更好地使用解决方案*{margin:0; padding:0;} 无论您想要什么，只需根据您的要求应用保证金或填充，它将重置所有HTML标签边距和填充。

如果标题的百分比为

4 个答案: