爲什麼我的頁腳顯示像這樣

Question

我似乎在我的網站頁腳有一個小問題。 我已經交換了關於它在樣式和html中出現的順序的代碼。

任何意見讚賞

Picture of the footer

.left{ 
    text-align:left; 
    float:left; 
} 
.right{ 
    float:right; 
    text-align:right; 
} 
.centered{ 
    text-align:center; 
} 

<div class="footer-container"> 
    <footer class="wrapper"> 
     <div id="footer"> 
      <p class="left"><img src="img/map25-redish.png"/> Curaheen, Cork </p> 
      <p class="right"><img src="img/telephone65-blue.png"/> </p> 
      <p class="centered"><img src="img/envelope4-green.png"/ </p> 
      <br/><br/> 
     </div> 
    </footer> 

Answer 1

事實上，它看起來就像是一個浮動的問題。爲了解決這個問題，你有許多解決方案，如邊緣或線條高度。

但我的建議是使用ul列表，顯示您的li項目inline-block並給予他們33％的寬度。

浮動從正常流程中移除您的元素。

body { 
 
    margin:0; 
 
    padding: 0; 
 
} 
 

 
footer { 
 
    background: #eee; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
ul { 
 
    display: block; 
 
    
 
    width: 100%; 
 
    
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    width: 30%; 
 
    text-align: center; 
 
}

<footer> 
 
    <ul> 
 
    <li>#01</li> 
 
    <li>#02</li> 
 
    <li>#03</li> 
 
    </ul> 
 
</footer>

Answer 2

我會用Flexbox將走得更遠比亞歷克西斯的回答有一個更現代的方法：

#footer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    /* adjust margin and padding beow to suit your design */ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#footer li { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#footer li img { 
 
    margin-right: 5px; 
 
}

<ul id="footer"> 
 
    <li><img src="http://fakeimg.pl/40"/>Curaheen, Cork </li> 
 
    <li><img src="http://fakeimg.pl/40"/>Email address</li> 
 
    <li><img src="http://fakeimg.pl/40"/>Phone number</li> 
 
</ul>

這樣一來，孩子們元素中#footer會以他們需要的空間，以相同的順序重新在HTML中，讓它們之間的空間（justify-content屬性）垂直居中（align-items屬性）。

我們遵循LI兒童與文本（align-items屬性）

你必須調整margin和padding以滿足您的設計，當然對準圖像相同的過程。