HTML&；CSS：我的UL扩展到容器之外_Html_Css

HTML&；CSS：我的UL扩展到容器之外

html css

HTML&；CSS：我的UL扩展到容器之外,html,css,Html,Css,我的UL有问题。我将其宽度设置为：100%，但它看起来像延伸到容器外部这是图片的链接：这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Official Website of Andrew</title> <link rel="stylesheet" type="text/css"

我的UL有问题。我将其宽度设置为：100%，但它看起来像延伸到容器外部

这是图片的链接：

这是我的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>

您必须从ul上拆下左侧和右侧的衬垫。或者，如您的示例所示，将ul的填充设置为：

20px 0px 35px 0px

top right down left

padding

此外，删除左边的

边距：-1.8px
CSS:
示例。
我认为这是因为为ul和li元素设置了padding属性。请记住，填充将独立于设置的宽度或高度增加块的大小
您可以从ul样式中删除width属性并将其签出。发生这种情况的原因是您的ul应用了右/左填充。
同时使用填充和宽度：100%
将导致元素的长度在宽度上为100%+右/左填充

您可以做的是添加到UL
元素中。使用框大小调整时，填充/边框等不会更改元素的宽度，而是应用于元素内
谢谢你。但我仍然看到它仍然延伸到容器之外？因为您还有一个余量：-1.8px在ul上，将其移除。好的，移除左边的边距：-1.8px。现在，两边看起来都没有真正冲洗到容器的左侧和右侧？。编辑：我删除了标题周围的绿色边框，现在UL冲洗到容器的左侧。但是，右边没有刷新到容器的右边。我从UL中删除了width属性。现在，看起来它的宽度没有接触到容器的末端（在右边）？对。看看你们为ul块设置的最小宽度属性——它是500px。您必须将ul padding（右/左）值添加到此500，然后添加ul内每个li元素的水平padding以获得数量宽度。使用框大小：边框框
对于标题ul li，它将解决您的问题
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;
}

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;
}

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;
}