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

あなたの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 に答える