学校项目的文本对齐

Question

我正在处理学校项目的HTML文件。我可以使用一些帮助来对齐页面上的文本。我尝试过显示标签，例如内联块，但似乎没有任何效果。这张照片是我想要发生的 当我进行内联块时会发生这种情况。 拜托，谢谢！

Answer 1

您必须像这样更改HTML代码结构....

body > h1 
body > section.a > h2 > ol
body > section.b > h2 > ol

现在在css中你必须做一些改变，比如......

section.a, section.b {
  width:49%;
}

section.a{
  float:left;
}
section.b{
  float:right;
}

＆＃13;

＆＃13;

body {
    /*background: url("DC.jpg") no-repeat top right;
    background-color: silver;
    background: url(MarvelDC.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  */
  background:#000;
}
h1 {
    font-family: sans-serif;
    font-size: 40;
    text-align: center;
    margin-top: auto;
    color: white;
}
h2, h3 {
    font-family: serif;
    font-size: 30;
    color: white;
}
section.b {
    vertical-align: text-top;
}
section.a{
float:left;
  width:49%;

}
section.b {
float:right;
  width:49%;
}
ol.a, ol.b {
    color: white;
}

＆＃13;

<h1>Best Marvel and DC TV Shows</h1>
<section class="a">
  
  <h2>Descriptions and Pictures</h2>
   <ol class="a">
    <li><a href="C:\Users\Nick\Documents\ECS\HTML\arrow.html">Arrow on CW: 5 Seasons, 2012-present</a></li>
    <li><a href="C:\Users\Nick\Documents\ECS\HTML\daredevil.html">Daredevil on Netflix: 2 seasons, 2015-present</a></li>
    <li><a href="C:\Users\Nick\Documents\ECS\HTML\agents of shield.html">Agents of SHIELD on ABC: 4 seasons, 2013-present</a></li>
    <li><a href="C:\Users\Nick\Documents\ECS\HTML\the flash.html">The Flash on CW: 3 seasons, 2014-present</a></li>
    <li><a href="C:\Users\Nick\Documents\ECS\HTML\legends of tomorrow.html">Legends of Tomorrow on CW: 2 seasons, Jan 2016-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/Jessica_Jones_(TV_series)">Jessica Jones on Netflix: 1 season, 2015-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/List_of_Supergirl_episodes">Supergirl on CW: 2 seasons, 2015-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/Luke_Cage_(TV_series)">Luke Cage on Netflix: 1 season, 2016</a></li>
   </ol>
 </section>
 <section class="b">
  <h2>List of Episodes (Wiki)</h2>
   <ol class="b">
    <li><a href="https://en.wikipedia.org/wiki/List_of_Arrow_episodes">Arrow on CW: 5 Seasons, 2012-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/Daredevil_(TV_series)">Daredevil on Netflix: 2 seasons, 2015-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/List_of_Agents_of_S.H.I.E.L.D._episodes">Agents of SHIELD on ABC: 4 seasons, 2013-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/List_of_The_Flash_episodes">The Flash on CW: 3 seasons, 2014-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/Legends_of_Tomorrow">Legends of Tomorrow on CW: 2 seasons, Jan 2016-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/Jessica_Jones_(TV_series)">Jessica Jones on Netflix: 1 season, 2015-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/List_of_Supergirl_episodes">Supergirl on CW: 2 seasons, 2015-present</a></li>
    <li><a href="https://en.wikipedia.org/wiki/Luke_Cage_(TV_series)">Luke Cage on Netflix: 1 season, 2016</a></li>
   </ol>
 </section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

body{position:relative;} 
section.b{position:absolute;top:0px;right:0px;}

稍后您可以更改top＆amp;的值在section.b上正确对齐。