0

在这里，在下面的代码中，文本<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;
}
4

2 回答 2

0

起初，没有必要style为每个element使用它的ID. 你可以简单地给它们相同的class name样式，只使用class name. 第二，我建议你使用UL标签来制作导航菜单。最后，你可以使用float属性来达到你想要的效果。我已经更新了您的原始代码，这里是JSFiddle中的演示。

PS问我，如果你不清楚。

于 2013-07-09T12:30:36.327 回答
0

您的 css 代码相当冗长。

我想这就是你要找的

小提琴

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;
}
于 2013-07-09T12:22:53.857 回答