Question

此处，在以下代码中，<p></p>中的文本显示在div中的图标下方。我希望此<p>出现在图标图像旁边的div中。另外，我希望<div>标记位于页面底部。

这是我的代码。

<body>
    <input type="date">Date</input>
<input type="number">Fs</input>
<input type="number">PtP</input>
<br/><br/>

<div id="add"><img src="iconic\vector\plus_alt.svg"><p>Add</p></div>
<div id="show"><img src="iconic\vector\eye.svg" title="see"><p>Show</p></div>
<div id="showAll"><img src="iconic\vector\list.svg"><p>Show All</p></div>
<div id="delete"><img src="iconic\vector\trash_stroke.svg"><p>Clear All</p></div>
</body>

这里是css

#add 
{
margin-left:auto;
margin-right:auto;
margin-bottom:0px
}
#add
{

 width: 25%;
 height: 40px;
 float: left;
   background-color:#ffcc00;opacity:0.75;
}
#add  p
{font-size:15px;
position: inline;
visibility:hidden
}
#add:hover  p
{
visibility:visible;
}



#show
{
  width: 25%;
  height: 40px;
  float: left;
  background-color:#ffcc00;opacity:0.75;

}
#show p
{font-size:15px;
position: inline;
visibility:hidden
}
#show:hover p
{
visibility:visible;
}


#showAll
{
  width: 25%;
  height: 40px;
  float: left;
  background-color:#ffcc00;opacity:0.75;

}
#showAll p
{font-size:15px;
position: inline;
visibility:hidden
}
#showAll:hover  p
{
visibility:visible;
}


#delete
{
  width: 25%;
  height: 40px;
  float: right;
 background-color:#ffcc00;opacity:0.75;
}
#delete p
{font-size:15px;
position: relative;
visibility:hidden
}
#delete:hover  p
{
visibility:visible;
}

Answer 1

你的css代码相当冗长。

我认为这就是你要找的东西

<强> FIDDLE

div
{

 width: 25%;
 height: 40px;
 float: left;
 background-color:#ffcc00;opacity:0.75;
}
p
{
    font-size:15px;
    display:inline;
    visibility:hidden;
}

div:hover p
{
visibility:visible;
}

Answer 2

首先，无需使用style为每个element编写相同的ID。您只需使用class name为它们提供相同的class name和样式即可。第二，我建议你使用UL标签来制作导航菜单。最后，您可以使用float属性实现所需的效果。我已更新您的原始代码，这是JSFiddle中的演示。

P.S。问我，如果你不清楚的话。

我想要在图标图像旁边显示文本，而不是在它下面

2 个答案: