[英]HTML/CSS padding issue
所以這就是我正在做的: jsfiddle代碼
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.menu {
background-color: #c00e0e;
opacity: 0.5;
filter: Alpha(opacity=50);
/* IE8 and earlier */
clear: both;
margin: 0 auto;
width: 730px;
text-align: center;
color: #FFF;
border-radius: 5px;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4);
}
.menu ul {
list-style: none;
margin: auto;
display: block;
}
.menu ul li {
display: inline-block;
width: auto;
height: 42px;
padding: 0;
font-family:'Chela One', cursive, Helvetica, sans-serif;
font-size: 20px;
}
.menu ul li a {
height: 42px;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0px 10px 0px 10px;
color: #fff;
text-align: center;
}
.menu ul li a:hover {
height:42px;
width: auto;
text-decoration: none;
color: #000000;
}
.menu ul li a.current {
height: 42px;
width: auto;
float: left;
text-decoration: none;
padding: 0px;
color: #fff;
}
/* Header------------------------------------------*/
#header {
height: 291px;
background: #FFE680 url('http://i43.tinypic.com/2ivb7mh.png') no-repeat;
padding-top: 30px;
}
.big {
font-family:'Luckiest Guy', cursive;
font-size: 50px;
margin: 0px auto;
padding-top: 50px;
text-align: center;
color: #FFF;
}
/* Middle--------------------------------------*/
#content {
text-align: center;
margin: auto;
padding: 0 0 800px;
background-color: #343436;
}
.footer_misc {
background-color: #000;
width: 1000px;
position: relative;
margin: 0 auto;
text-align: center;
color: #FFF;
height: 50px;
}
/* Footer-------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #b40b0b;
position: relative;
}
/* tell the imgwithtxt's children to float left: */
.imgwithtxt > * {
float:left;
margin-right:5px;
}
/* this is called a clearfix. it makes sure that the imgwithtxt's children floats are cleared, without using extra markup */
.imgwithtxt {
*zoom:1
/* for IE */
}
.imgwithtxt:before, .imgwithtxt:after {
content:" ";
display: table;
}
.imgwithtxt:after {
clear: both;
}
/* end clearfix*/
#title {
text-align:center;
font-size: 20px;
color: #FFF;
margin: 10px auto;
font-family:'Luckiest Guy', cursive;
}
.columns {
width: 1000px;
text-align: center;
margin: 0 auto;
padding: 0 auto;
}
.col1 {
float: left;
width: 200px;
}
.col2 {
float: left;
width: 200px;
}
.col3 {
float: left;
width: 200px;
}
運行代碼時,內容前的背景為黃色。 我應該在CSS中錯過什么? 我只希望菜單框具有填充,以便不會位於頂部。 我試圖解決此問題無濟於事。 非常感謝您的幫助。 謝謝。
只需在.menu ul li a
添加line-height
屬性
您必須在li以下添加線高,然后您的中殿將正確顯示。 小提琴鏈接在這里 。
.menu ul li {
display: inline-block;
font-family: 'Chela One',cursive,Helvetica,sans-serif;
font-size: 20px;
height: 42px;
padding: 0;
width: auto;
line-height: 42px;
}
如果要刪除黃色背景,則可以從css下面將其刪除,並根據您的適當顏色進行添加。 這里的背景色設置為黃色,這就是為什么它顯示黃色。 現在,我更改了背景色。
#header {
background: url("../img/header3.png") no-repeat scroll 0 0 #343436;
height: 291px;
padding-top: 30px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.