-2
有人可以請解釋爲什麼我的填充沒有按照它的方式行事嗎？我的填充應該是一個完美的盒子，但由於某種原因，它會以一個長方形的矩形出現。圍繞兩側的填充物應該是完美的方形。我對我的其他li和ul有更多的規則，但這只是在我的'#nav'ID中，所以我不明白爲什麼會有任何衝突。填充不起作用，因爲它應該給出錯誤的形狀
html {
height: 100%;
}
body{
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner{
margin-top: 130px;
width: auto;
}
/*
#wrapper{
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
width: 85%;
background-color: blue;
height: calc(100vh - 130px);
}
*/
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background-color: #862d59;
height: 100px;
box-shadow: 0px 5px 8px grey;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #862d59;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #862d59;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
li.middle{
background-color: #26004d;
padding: 10px 10px 10px 10px;
margin-right: 30px;
margin-top: 200px;
text-align: center;
color: white;
}<div id="wrapper">
\t <div id="inner">
\t \t <ul>
\t \t \t <li class="middle">some stuff</li>
\t \t </ul>
\t </div>
\t </div>
\t <div id="footer">
\t \t <div class="wrap">
\t \t \t <div class="sub"></div>
\t \t \t <div class="sub"></div>
\t \t \t <div class="sub"></div>
\t \t </div>
\t </div>
定義一個高度和寬度來製作一個正方形，填充增加了距離內容的距離。 – theblindprophet
使用相等的'width'和'height'創建一個squase，'padding's只添加到由'width'和'height'設置的形狀 – warkentien2