在菜單下的圖標下方添加文本

Question

我是新來的CSS和HTML。我創建了一個包含8個圖標的菜單欄。我想在每個圖標下方添加文本，但無論我在HTML中添加文本的位置，它都會將所有內容混淆。我試過了我能想到的一切。任何幫助將不勝感激。謝謝！

<div class="icon-bar"> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/ria- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon"   
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
ria.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/yoga- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
yoga.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/abit- 
stroke.png"></span> 
<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
abit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<img class="esm-icon-active" src="http://treehouserecoverypdx.com/wp- 
content/uploads/2017/05/circle-esm.png"> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/pg- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
pg.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/lit- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
lit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/1on1- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
1on1.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/education- 
stroke.png"></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
education.png"></span> 
</span></a> 

</div> 

這裏是CSS：

#surround{ 
display:inline-block; 
width:12.2%; 
} 
#onhover { 
display: none; 
} 
#surround:hover span[id="initial"] { 
display: none; 
} 
#surround:hover span[id="onhover"] { 
display: block; 
} 

.icon-bar { 
width: 100%; 
overflow: hide; 
padding-top: 7px; 
background-color:black; 
padding-bottom:100px; 
} 

.icon-bar a { 
float: right; 
width: 12.5%; 
text-align: center; 
transition: all 0.3s ease; 
color: white; 
font-size: 12px; 
} 

.esm-icon { 
opacity:0.5!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 


.esm-icon-active { 
opacity:1!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 

Answer 1

我相信我對你的解決方案。首先，我會附上截圖，向您展示我的解決方案的結果，然後我會告訴你我做了什麼。

以下是截圖：

我每個圖標下添加的文本只是「這是一個考驗。」好吧，現在讓我解釋我做了什麼，爲什麼。

真的，這基本上是我做的兩件事情。第一件事是在你的CSS代碼中，我註釋了1行。這裏是：

.icon-bar a { 
/*float: right;*/ 
width: 12.5%; 
text-align: center; 
transition: all 0.3s ease; 
color: white; 
font-size: 12px; 
} 

「浮動：正確」是主要問題。不幸的是，我無法給出一個精確的解釋，爲什麼右邊的浮動是問題，但是我幾個月前建立了一個網站，我在我的導航欄中右鍵移動了東西，同樣的事情發生在我身上。

我不知道你是否正確地將事情漂浮起來，因爲你需要特定順序的圖標，但如果是這種情況，那麼不是試圖通過漂浮獲得你想要的訂單（總是一個壞主意），我只需按照希望它們出現在第一位的順序將代碼輸入代碼即可。作爲未來的做法，這將爲您節省很多頭痛。

我說我做了兩件事。這是第二個...

我在代碼中的每個圖標之後放置了文本。這是我如何改變它。仔細看看我如何將文本放置在具有「環繞」類的圖像的跨度中。

HTML

<div class="icon-bar"> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/ria- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon"   
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
ria.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/yoga- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
yoga.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/abit- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
abit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<img class="esm-icon-active" src="http://treehouserecoverypdx.com/wp- 
content/uploads/2017/05/circle-esm.png"><p>This is a test</p></span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/pg- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
pg.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/lit- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
lit.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/1on1- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
1on1.png"></span> 
</span></a> 

<a href="#"><span id="surround"> 
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/education- 
stroke.png"><p>This is a test</p></span> 

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle- 
education.png"></span> 
</span></a> 

</div> 

通過把文本圖像的代碼之後，該文本將中心本身默認的圖標下，因爲你必須顯示爲「inline-的「環繞」級塊」。這裏是CSS代碼...我做「白」的字體顏色添加到p標籤，只是讓你可以看到文本：

CSS

p { 
    color: white; 
} 

#surround{ 
display:inline-block; 
width:12.2%; 
} 
#onhover { 
display: none; 
} 
#surround:hover span[id="initial"] { 
display: none; 
} 
#surround:hover span[id="onhover"] { 
display: block; 
} 

.icon-bar { 
width: 100%; 
overflow: hide; 
padding-top: 7px; 
background-color:black; 
padding-bottom:100px; 
} 

.icon-bar a { 
/*float: right;*/ 
width: 12.5%; 
text-align: center; 
transition: all 0.3s ease; 
color: white; 
font-size: 12px; 
} 

.esm-icon { 
opacity:0.5!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 


.esm-icon-active { 
opacity:1!important; 
min-width: 55px; 
max-width: 55px; 
display: block; 
margin: auto; 
border-radius: 100%; 
border: 2px solid transparent; 
} 

我希望幫助！還有一件事。我注意到在「.icon-bar」的CSS中有一個「padding-bottom：100px」。當然，如果你不喜歡在圖標和文字下留下那麼多空間，你可以給它一個像素20px或者其他的東西。

讓我知道這是如何適用於你。