學校項目的文本對齊

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

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

<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>

Answer 2

試試這個：

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

之後，您可以更改對上section.b的頂部&值，以得到它正確對齊。