Question

我的UL问题。我设置它的宽度：100％，但它看起来像是扩展到容器之外。

这是图片的链接：
http://s10.postimg.org/kp3i5v4mh/websiteuloutofcontainer.png

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Official Website of Andrew</title>
   <link rel="stylesheet" type="text/css" href="mainstyle.css" />
<head>
<body>

<div id="container">

<header>
<img id="andrewvuheader" src="images/andrewheader.png" alt="andrewvuheader" />

<div id="break"></div>

<ul>
   <li><a href="#" target="_blank">HOME</a></li>
   <li><a href="#" target="_blank">ABOUT</a></li>
   <li><a href="#" target="_blank">PROJECTS</a></li>
   <li><a href="#" target="_blank">COLLABORATE</a></li>
   <li><a href="#" target="_blank">CONTACT</a></li>
</ul>
</header>


</div> <!-- container DIV -->

</body>
</html>

这是我的CSS：

html, body  {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

/***************************
******* CONTAINER **********
***************************/

#container  {
    margin: 0 auto;
    height: 500px;
    border: 2px solid red;
    width: 1080px;
    max-width: 90%;
}

/***************************
********** HEADER **********
***************************/

header  {
    margin: 0;
    padding: 0;
    border: 2px solid green;
    background-color: #000000;
    width: 99.6%;
    height: 139px;
}

/* Andrew Vu Header */
img #anderwvuheader  {
    border: 2px solid yellow;
    padding: 10px;
    float: left;
    position: relative;
    margin-left: 20px;
}

/* Clears all float properties */
#break  {
    clear: both;
}

/***** Menu *****/
header ul  {
    width: 100%;
    margin: 0;
    padding: 20px 20px 35px 20px;
    list-style-type: none;
    background-color: #000000;
    margin-top: -5px;
    position: relative;
    margin-left: -1.8px;
    min-width: 500px;
}

/***** Listed Items *****/
header ul li {
    background-color: #000000;
    font-weight: bold;
    font-size: 0.8em;
    font-family: Verdana, Helvetica, Arial, Sans-serif;
    float: left;
    display: inline;
    border-right: 2px solid red;
    padding: 10px 10px;
    margin-top: -15px;
}

header ul li a  {
    text-decoration: none;
}

/* Normal, unvisited link */
header ul li a:link  {
    color: #FFFFFF;
}

/* Visited link */
header ul li a:visited {
    color: #FFFFFF;
}

/* Mouse over link */
header ul li a:hover {
    color: yellow;
}

/* Selected link */
header ul li a:active {
    color: #FFFFFF;
}

Answer 1

我认为，由于为ul和li元素设置了填充属性，所以发生了这种情况。请记住，填充将增加块的大小，与您设置的宽度或高度无关。

您可以从ul样式中删除width属性并将其检出。

Answer 2

你必须从ul中删除padding-left和padding-right。或者在您的示例中将ul的填充设置为：20px 0px 35px 0px =＆gt; top-right-down-left填充;

另外，请删除margin-left: -1.8px;。

CSS：

header ul  {
    width: 100%;
    margin: 0;
    padding: 20px 0px 35px 0px;
    list-style-type: none;
    background-color: #000000;
    margin-top: -5px;
    position: relative;
    min-width: 500px;
}

示例here。

Answer 3

发生这种情况的原因是因为您的UL已经应用了右/左填充。同时使用padding和width:100%;会导致元素的长度为100% + rigt/left padding。

您可以执行的操作是将box-sizing添加到UL元素中。使用box-sizing时，填充/边框等不会改变元素的宽度，而是将应用于中。

header ul  {
    width: 100%;
    margin: 0;
    padding: 20px 20px 35px 20px;
    list-style-type: none;
    background-color: #000000;
    margin-top: -5px;
    position: relative;
    min-width: 500px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

FIDDLE

HTML＆amp; CSS：我的UL延伸出容器

3 个答案: