Question

我试图修复滚动的顶部和底部div栏，文本居中

顶栏已修复，但文字对齐不起作用底栏并没有出现

我无法看到css有什么问题，我在chrome控制台中没有错误

谢谢

 <!DOCTYPE html>
<html>
<head>
<title>
My test
</title>
<meta charset="UTF-8">  
</head>
<style>

div{ margin-left: 20%;
padding-left: 20%
}

#headbar 
{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar 
{display:block;text-align:center;position:fixed;width:100%;
}
#width: 80%


p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};


<body>


</style>


<div id="headbar" style="background-color: #ffccff";> 

    <a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>  
    <a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a> 

</div>

<?php


for ($n=0; $n<101; $n++) {
    $modulo = ($n%3);

    if($modulo==0){
        $bg_color = '#e0ffff';
    }elseif($modulo==1){
        $bg_color = '#f5f5db';
    }elseif($modulo==2){
        $bg_color = '#ffe4e1';
    }

    echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}






?>

<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />

<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" /> 
</div>



</form>
</body>
</html>

Answer 1

这样的东西？

＆＃13;

CREATE TABLE job_profile
(
  profile_id numeric(5,0) NOT NULL,
  job_category_id numeric(5,0),
  test_id numeric(5,0),
  sex character(1),
  default_yn character(1),
  screening_type_id numeric(5,0),
  CONSTRAINT job_profile_pkey PRIMARY KEY (profile_id),
  CONSTRAINT fk_jobprofile_jobcate FOREIGN KEY (job_category_id)
      REFERENCES job_category_mast (job_category_id) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE NO ACTION,
  CONSTRAINT fk_jobprofile_test FOREIGN KEY (test_id)
      REFERENCES test_mast (test_id) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE NO ACTION,
  CONSTRAINT fk_prof_screentype FOREIGN KEY (screening_type_id)
      REFERENCES screening_type_mast (screening_type_id) MATCH SIMPLE
      ON UPDATE RESTRICT ON DELETE RESTRICT,
  CONSTRAINT uk_job_test_sex_screening UNIQUE (job_category_id, screening_type_id, test_id, sex)
)
WITH (
  OIDS=FALSE
);
ALTER TABLE job_profile
  OWNER TO cdcis;
GRANT ALL ON TABLE job_profile TO cdcis;
GRANT SELECT, UPDATE, INSERT, DELETE ON TABLE job_profile TO cdcis_app;

＆＃13;

#headbar 
{
  display:inline-block;
  text-align:center;
  position:fixed;
  width:100%;
}
#footbar 
{
  display:block;
  text-align:center;
  position:fixed;
  width:100%;
  bottom:0;
}


p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};

＆＃13;

Answer 2

<title>
My test
</title>
<meta charset="UTF-8">  
</head>
<style>

body{
    margin:0;
    padding:0;
}
.spacer{
    height:1em;
    width:100%;
}
#headbar{display:inline;text-align:center;position:fixed;width:100%;
}

#footbar 
{display:block;text-align:center;position:fixed;width:100%;bottom:0;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};


</style>
<body>

<div id="headbar" style="background-color: #ffccff";> 

    <a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>  
    <a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a> 

</div>

<?php


for ($n=0; $n<101; $n++) {
    $modulo = ($n%3);

    if($modulo==0){
        $bg_color = '#e0ffff';
    }elseif($modulo==1){
        $bg_color = '#f5f5db';
    }elseif($modulo==2){
        $bg_color = '#ffe4e1';
    }

    echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}






?>
<div class="spacer"></div>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />

<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" /> 
</div>



</form>
</body>
</html>

我尝试纠正一些问题。由于<div>填充和边距，您的文字对齐无效。希望这有帮助。

这是截图在我的屏幕上的截图

http://prntscr.com/a794gf

文本对齐不起作用，并且不显示footbar div？

2 个答案: