メニューの下にアイコンを追加してください。

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

は、私はあなたのためのソリューションを持っていると信じています。まず、私はソリューションの結果を示すためのスクリーンショットを添付します。次に、私が行ったことを教えてあげます。ここで

はスクリーンショットです：

私は、各アイコンの下に追加したテキストは、「これはテストです」だけでした。さて、私が何をしたのか、そしてなぜそれを説明しましょう。

本当に私がしたのは基本的に2つのことでした。最初のことはあなたのCSSコードにあった、私は1行をコメントアウトした。ここには：

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

「フロート：右」が主な問題でした。残念ながら、なぜ浮動小数点が問題なのかを正確に説明することはできませんが、私は数ヶ月前にウェブサイトを構築しました。ここでNavbarに物を浮かべていました。同じことが起こりました。

あなたが特定の順序でアイコンを望んでいたので、あなたが浮動していたかどうかはわかりませんが、そうであれば、浮動小数点数（常に悪い考え方）で必要な順序を得るのではなく、私はちょうどあなたがそれらを最初に表示したい順序でコードにアイコンを入力します。そうすれば、将来の練習として頭がおかしくなることはありません。

私は2つのことがあったと言いました。ここに2番目の...

コードの各アイコンの直後にテキストを配置しました。ここで私はそれをどのように変更したのですか？ 「サラウンド」のクラスを持つ画像のスパンにテキストをどのように配置したかを詳しく見てみましょう。右の画像のためのコードの後に​​テキストを置くことによって

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

私はそれが役に立てば幸い！もう一つ。 CSSの ".icon-bar"に "padding-bottom：100px"という文字列があることに気付きました。もちろん、あなたがアイコンやテキストの下にそのような多くのスペースを持っているのが好きでないなら、20pxかそれ以上のパディングを与えることができます。

どのようにあなたのために働くか教えてください。