所有网站内容突然左对齐

时间:2015-03-04 17:14:41

标签: html css

当我为一个页面编辑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/

2 个答案:

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

但是,如果您这样做,我怀疑您在其他网页上会遇到问题,请检查您的共享网址。