字體真棒圖標不頁腳中正確顯示

Question

HTML：

<div id="container"> 
    <h1>This website is currently getting a makeover.</h1> 
    <p>It will be back shortly with updated portofolio, revamped   (custom) design, and new pricing.</p> 
    <footer> 
    <p class="left copyright">Copyright &copy; 2016 Patrick Black</p> 
    <a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a> 
    </footer> 
</div> 

CSS（使用預處理;手寫筆;如果想完整的代碼請評論：

html { 
    position relative 
    min-height 100% 
} 
body { 
    font-family: 'Roboto', sans-serif; 
    text-align center 
    height 100% 
    margin 0 0 50px 
} 
h1 { 
    margin-top: 30vh; 
} 
footer { 
    background black 
    color white 
    height 50px 
    position absolute 
    bottom 0 
    left 0 
    width 100% 
} 
.left { 
    text-align left 
} 
.right { 
    float right 
} 
.copyright { 
    margin-left 10px 
} 
.social { 
    display inline-block 
} 

下面是完整的代碼:: http://codepen.io/Mortiferr/pen/pyLYqa 作爲您可以看到，Twitter圖標顯示在頁腳下方

Answer 1

的

<p class="left copyright">Copyright &copy; 2016 Patrick Black</p> 

是頁面的整個寬度，並因此迫使Twitter的部分到下一行。

你可以通過浮動該段落來解決這個問題。

.left { 
    text-align: left; 
    float: left; 
} 

Codepen Demo

Answer 2

您應該使用此css作爲適合頁腳的Twitter字體圖標

.social { 
display inline-block; 
position:absolute; 
bottom:0; 
right:0; 
padding:6px 
} 

Answer 3

添加.copyright規則：

display inline-block 
float left 

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    text-align: center; 
 
    height: 100%; 
 
    margin: 0 0 50px; 
 
} 
 
h1 { 
 
    margin-top: 30vh; 
 
} 
 
footer { 
 
    background: black; 
 
    color: white; 
 
    height: 50px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.left { 
 
    text-align: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
.copyright { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.social { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="container"> 
 
    <h1>This website is currently getting a makeover.</h1> 
 
    <p>It will be back shortly with updated portofolio, revamped (custom) design, and new pricing.</p> 
 
    <footer> 
 
    <p class="left copyright">Copyright &copy; 2016 Patrick Black</p> 
 
    <a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a> 
 
    </footer> 
 
</div>

Answer 4

你只需要添加

.left{ 
    float:left; 
    text-align left; 
} 

i{ 
    line-height: 50px; 
} 

工作例如：http://codepen.io/anon/pen/aNGOKy