当我为一个页面编辑HTML时,所有网站页面都是左对齐的,这样右边就有一个巨大的空间。当我检查CSS代码时,所有div标签都使用'auto'定位。重要的是,这发生在我甚至没有编辑的html / css中。这是我的CSS:
/* CSS Document - this does formatting for you*/
/* Erice Myer's Reset, which resets the browser's innate styles to a baseline */
html, body { margin: 0; padding: 0; border 0: background: transparent; font-size: 12px;}
div, span, article, aside, footer, header, hgroup, nav, section, h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
img {margin: 0; padding; 0; border: 0; }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
}
table { border-collapse: collapse; border-spacing: 0 }
input, select, textarea, form, fieldset {
margin: 0; padding: 0; border 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none; }
/* Reset ends and my style starts below */
/* Global - specify properties for the whole page*/
html { }
body { background-color:#666}
/* Headings - specify properties for headers*/
h1, h2, h3, h4, h5, h6, hbar1, hbar2, hbar3, hbar4, hbar5, hbar6 {font-family:Arial, Helvetica, sans-serif; }
/* Headers with gray bars */
hbar1 {font-size:24px; color:#F60; padding-bottom:10px; border-bottom:2px #CCC solid; margin-top: 15px; margin-bottom:15px;}
hbar2 {font-size:24px; color:#000; padding-bottom:10px; border-bottom:2px #CCC solid; margin-top: 15px; margin-bottom:15px;}
hbar3 {font-size:20px; color:#F60; padding-bottom:5px; border-bottom:2px #CCC solid; margin-top: 15px; margin-bottom:15px;}
hbar4 {font-size:20px; color:#000; padding-bottom:5px; border-bottom:2px #CCC solid; margin-top: 15px; margin-bottom:15px;}
hbar5 {font-size:16px; color:#F60; padding-bottom:0px; border-bottom:2px #CCC solid; margin-top: 15px; margin-bottom:15px;}
hbar6 {font-size:16px; color:#000; padding-bottom:0px; border-bottom:2px #CCC solid; margin-top: 15px; margin-bottom:15px;}
/* Headers without bars */
h1 {font-size:24px; color:#F60; padding-bottom:10px;}
h2 {font-size:24px; color:#000; padding-bottom:10px;}
h3 {font-size:20px; color:#F60; padding-bottom:5px;}
h4 {font-size:20px; color:#000; padding-bottom:5px;}
h5 {font-size:16px; color:#F60; padding-bottom:0px;}
h6 {font-size:16px; color:#000; padding-bottom:0px;}
/* Text Elements - specify properties for inner content text */
/* normal text */
p { font-family:Arial, Helvetica, sans-serif; color:#000; font-size: 12px; line-height:150%; margin:5px 0; margin-top:15px}
p .left { float:left;}
p .right { float:right;}
/*anchors for links*/
a {font-family:Arial, Helvetica, sans-serif; font-size:16px}
a:link { color:#000; }
a:visited { color:#000; }
a:active { color:#000; }
a:focus { color:#F60; }
a:hover { color:#F60; }
a12 {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
a12:link { color:#000;}
a12:visited { color:#666;}
a12:active { color:#000;}
a12:focus { color:#F60;}
a12:hover { color:#F60;}
/* Image */
img { }
.image_people {float:left; margin-top:25px; margin-left:150px}
/* Containers - set size of stuff
margin: 2 values (top,left) (top, right) (bottom, right)
(bottom, left) going clockwise. auto sets it to be
centered
float: allows things to be floated and justified
clear: says don't allow something float up in somewhere else
margin/padding: margin spaces outside and padding spaces inside
*/
/* Formatting for header/banner for each page */
#outer { width: 960px; margin-top:30px; margin-bottom:30px; margin-left:30px; margin-right:30px; background-color:#FFF; }
#wrapper { width: 900px; margin: 0 auto; background-color:#FFF; }
#lab_logo { margin: 30px 0px; float:left; background-color:#FFF; }
#icons { margin: 35px 0px; float:right; }
#top_nav { clear:both; } /* below are descendent selectors for top nav */
#top_nav ul { border-top:2px #000 solid; border-bottom:2px #000 solid; margin:10px 0; padding:5px 0;}
#top_nav ul li { display:inline; }
#top_nav ul li a { padding:0 10px; }
#banner { margin-bottom:-10px; }
/* Formatting for top */
#content_top { margin: 30px 0px; width:900px; float:left; }
#content_top p { } /* paragraph style */
#content_top a { line-height:150%; margin-top:15px} /* anchor link style */
#content_top a:link { color:#000; font-size:12px; }
#content_top a:visited { color:#000; font-size:12px; }
#content_top a:active { color:#000; font-size:12px; }
#content_top a:focus { color:#F60; font-size:12px; }
#content_top a:hover { color:#F60; font-size:12px; }
#content ul li { margin-left: 30px;}
#content_top h1 { font-size:24px; color:#F60; }
#content_top h2 { font-size:24px; color:#000; }
#content_top h3 { font-size:20px; color:#F60; }
#content_top h4 { font-size:20px; color:#000; }
#content_top h5 { font-size:16px; color:#F60; }
#content_top h6 { font-size:16px; color:#000; }
#content_top hbar1 {font-size:24px; color:#F60; }
#content_top hbar2 {font-size:24px; color:#000; }
#content_top hbar3 {font-size:20px; color:#F60; }
#content_top hbar4 {font-size:20px; color:#000; }
#content_top hbar3 {font-size:16px; color:#F60; }
#content_top hbar4 {font-size:16px; color:#000; }
/* Formatting for middle left justified*/
#content { margin: 30px 0 ; width:900px; float:left; }
#content p { } /* paragraph style */
#content p_right {float:left}
#content a { float:left} /* anchor link style */
#content a:link { color:#000; font-size:24px; margin-top:120px; margin-left:50px}
#content a:visited { color:#000; font-size:24px; }
#content a:active { color:#000; font-size:24px; }
#content a:focus { color:#F60; font-size:24px; }
#content a:hover { color:#F60; font-size:24px; }
#content h1 { font-size:24px; color:#F60; }
#content h2 { font-size:24px; color:#000; }
#content h3 { font-size:20px; color:#F60; }
#content h4 { font-size:20px; color:#000; }
#content h5 { font-size:16px; color:#F60; }
#content h6 { font-size:16px; color:#000; }
#content hbar1 {font-size:24px; color:#F60; }
#content hbar2 {font-size:24px; color:#000; }
#content hbar3 {font-size:20px; color:#F60; }
#content hbar4 {font-size:20px; color:#000; }
#content hbar3 {font-size:16px; color:#F60; }
#content hbar4 {font-size:16px; color:#000; }
/* Formatting for bottom */
#content_bottom { margin: 30px 0 ; width:900px; float:left; }
#content_bottom p { } /* paragraph style */
#content_bottom a { } /* anchor link style */
#content_bottom a:link { color:#000; font-size:12px; }
#content_bottom a:visited { color:#000; font-size:12px; }
#content_bottom a:active { color:#000; font-size:12px; }
#content_bottom a:focus { color:#F60; font-size:12px; }
#content_bottom a:hover { color:#F60; font-size:12px; }
#content_bottom h1 { font-size:24px; color:#F60; }
#content_bottom h2 { font-size:24px; color:#000; }
#content_bottom h3 { font-size:20px; color:#F60; }
#content_bottom h4 { font-size:20px; color:#000; }
#content_bottom h5 { font-size:16px; color:#F60; }
#content_bottom h6 { font-size:16px; color:#000; }
#content_bottom hbar1 {font-size:24px; color:#F60; }
#content_bottom hbar2 {font-size:24px; color:#000; }
#content_bottom hbar3 {font-size:20px; color:#F60; }
#content_bottom hbar4 {font-size:20px; color:#000; }
#content_bottom hbar3 {font-size:16px; color:#F60; }
#content_bottom hbar4 {font-size:16px; color:#000; }
/* Formatting for bottom */
#footer {clear: both; margin:30px 0; margin-top: 30px; margin-bottom: 10px; padding-top:10px; padding-bottom:10px; border-top: 2px #000 solid; border-top: 2px #000 solid; background-color:#FFF}
#footer p { text-align:center; }
/* Micellaneous */
.date {color:#F60; margin-bottom:1px; margin-top:15px}
修订:请访问此处以访问HTML:https://jsfiddle.net/9m4umcrc/
答案 0 :(得分:1)
我不确定这是否是一个错字。但是,当你摆弄css的时候,你碰巧改变了这条线吗?
html, body { margin: 0; padding: 0; border 0: background: transparent; font-size: 12px;}
因为如果你仔细观察它所说的部分
border 0: background: transparent;
似乎错了它应该是border: 0; background: transparent;
希望这有帮助
答案 1 :(得分:0)
外部div设置为30px的边距。也许您在另一个页面上需要这个并且更改它会改变此页面的布局。
https://jsfiddle.net/9m4umcrc/2/
变化:
#outer { width: 960px; margin-top:30px; margin-bottom:30px; margin-left:30px; margin-right:30px; background-color:#FFF; }
致:
#outer { width: 960px; margin:30px auto; background-color:#FFF; }
但是,如果您这样做,我怀疑您在其他网页上会遇到问题,请检查您的共享网址。