나는 아래에 있지 않고 아이콘 이미지 외에 텍스트를 표시하고 싶습니다.

다음 코드에서 <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; 
}

출처

2013-07-09 Abhishek Jain

포함 된 div의 너비가 증가하면 이미지 뒤에 텍스트가 표시 될 수 있습니다. –

제목이 테스트의 위치를 말합니다 ** 이외에 ** 아이콘 위에 ** 표시되지 않습니다 ** – Danield

... 어쨌든 ... 여기 텍스트를 잘 정렬했습니다 : http://jsfiddle.net/danield770/sCEqC/2/ – Danield

귀하의 CSS 코드가 다소 장황.

나는 그 ID을 사용하여 각 element에 대해 동일한 style을 쓸 필요가 없다, 이것은 당신이 처음에

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

출처

2013-07-09 12:22:53 Danield

@ Danield ... 예 ... fyn ... thnx ...하지만 어떻게하면 텍스트가 아이콘 위에 표시되도록 할 수 있습니까? .. –

찾고있는 무슨 생각합니다. 당신은 그들에게 단지 class name을 사용하고 스타일은 class name 만 사용하면됩니다. 두 번째로, UL 태그를 사용하여 탐색 메뉴를 만드는 것이 좋습니다. 마지막으로 float 속성을 사용하여 원하는 효과를 얻을 수 있습니다. 원래 코드를 업데이트했으며 데모는 JSFiddle입니다.

P. 너에게 뭔가가 분명하지 않으면 나 한테 물어봐.

출처

2013-07-09 12:30:36

@ Karlen Kishmiryan ... tnx :) 거의 90 % 일을 아름답게 처리 ...하지만 목록 항목 사이에 몇 가지 경계가 나타납니다.이 항목을 제거하는 방법 ... 4 개의 아이콘이 들어있는 완벽한 div가 필요합니다. 둘째로 싶습니다. 이 네 항아리 패널은 화면 크기가 무엇이든간에 페이지 하단에 고정되어 있습니다 ... help –

그리고 어떤 경계가 있습니까? –

고정을 위해,''ul.nav selector''의'style'에이 라인을 추가하면됩니다 : position : fixed;''width : 100 %;''left : 0px;'또한 margin : 0px ;'. 여기에 업데이트 된 코드가 있습니다 : http://jsfiddle.net/UcnDk/3/ –

나는 아래에 있지 않고 아이콘 이미지 외에 텍스트를 표시하고 싶습니다.

답변

관련 문제