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

我相信我有一个解决方案。首先，我将附上一个截图，向您展示我的解决方案的结果，然后我会告诉您我做了什么。

这是截图：

我在每个图标下添加的文字只是＆＃34;这是一个测试＆＃34;。好的，现在让我解释一下我做了什么以及为什么。

真的，基本上我做了两件事。第一件事是在你的CSS代码中，我注释掉了1行。这是：

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

＆＃34; float：right＆＃34;是主要问题。不幸的是，我无法准确解释为什么向右浮动是问题，但几个月前我建立了一个网站，我在导航栏中放了一些东西，同样的事情发生在我身上。

我不知道你是不是正确地把事情搞砸了，因为你想要特定顺序的图标但是如果是这样的话，那么而不是试图通过浮动获得你想要的订单（总是一个坏主意），我只是按照您希望它们首先出现的顺序将图标输入到代码中。作为未来的实践，这将为您节省很多麻烦。

我说我做了两件事。这是第二个......

我将文字放在代码中的每个图标后面。这是我改变它的方式。仔细看看我如何将文本放置在具有＆＃34;环绕＆＃34;类的图像的跨度中。

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

通过将文本放在图像代码之后，默认情况下文本将在图标下居中，因为您拥有＆＃34;环绕＆＃34;类显示为＆＃34;内联块＆＃34;。这是CSS代码......我确实添加了一种字体颜色＆＃34; white＆＃34;到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;
}

我希望有所帮助！还有一件事。我注意到你有一个＆＃34; padding-bottom：100px＆＃34;在CSS中为＆＃34; .icon-bar＆＃34;。当然，如果你不想在图标和文字下面留下那么多空间，你可以给它一个20px或者其他东西的填充。

让我知道这对你有用。

在菜单中的图标下方添加文字

1 个答案: