이미지에 텍스트 장식을 추가하는 방법은 무엇입니까?

거친 시간이 좀 있습니다. 몇 가지 링크 옆에 몇 가지 아이콘을 만들었습니다. 링크에는 마우스를 가져갈 때 텍스트에 적용되는 "밑줄"텍스트 장식 효과가 있습니다. 아이콘을 추가했는데 완벽하게 맞습니다. 앵커 태그를 가리면 아이콘에 밑줄이 표시되지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?이미지에 텍스트 장식을 추가하는 방법은 무엇입니까?

HTML

    <a class="link" href="#"> 
         <img src="images/home.png" alt="" id="home" class="icon"/> 
         home 
        </a> 
        <a class="link" href="about/"> 
         <img src="images/about.png" alt="" id="about" class="icon"/> 
         About 
        </a> 
        <a class="link" href="contact/"> 
         <img src="images/contact.png" alt="" id="contact" class="icon"/> 
         Contact 
        </a> 
        <a class="link" href="work/"> 
         <img src="images/work.png" alt="" id="work" class="icon"/> 
         Work 
        </a>

CSS는

#home { 

    width: 15px; 
    height: 15px; 

} 

#about { 

    width: 15px; 
    height: 15px; 

} 

#contact { 

    width: 19px; 
    height: 15px; 

} 

#work { 

    width: 16px; 
    height: 15px; 

} 

.link { 

    margin: 0; 
    padding: 0; 
    display: inline-block; 
    line-height: 50px; 
    width: 100px; 
    font-size: 18px; 
    font-family: arial; 

} 

.link:link { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 

} 

.link:visited { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 

} 

.link:active { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 

} 

.link:hover { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: underline; 

}

나는 도움을 주셔서 감사합니다. 당신을 해달라고 이유

출처

2013-08-17 Allenph

이런 식으로 뭔가를 시도 ::

a{ 
margin-left:30px; 
font-size:18px; 
text-decoration:none; 
} 
a:hover { 
border-bottom:1px solid blue; 
}

예 : FIDDLE

출처

2013-08-17 07:33:23

, 나는이 시도

 <div class="navbar"> <a class="link" href="#"> <img src="images/home.png" alt="" id="home" class="icon"/> Home </a> <a class="link" href="about/"> <img src="images/about.png" alt="" id="about" class="icon"/> About </a> <a class="link" href="contact/"> <img src="images/contact.png" alt="" id="contact" class="icon"/> Contact </a> <a class="link" href="work/"> <img src="images/work.png" alt="" id="work" class="icon"/> Work </a> </div>

CSS. 여기에서 문제는 border 속성을 사용할 수 없다는 것입니다. 왜냐하면 line-height 속성을 사용하여 내비게이션 막대에 내 링크를 정렬했기 때문에 테두리가 내비게이션 막대의 맨 아래에 나타나고 단어 아래에 나타나지 않습니다. 이제 선 높이 대신 마진 윗 속성을 설정할 수는 있지만 불완전하게 정렬됩니다. 원하지 않는 점이 있습니다. 두 번째 문제는 선 높이 메서드 대신 여백 가기 메서드를 사용하면 높이가 정의되지 않은 경우에도 테두리와 텍스트 사이의 간격이 너무 넓습니다. 다른 솔루션? – Allenph

좋아, 내가 그것을 알아 냈 (당신은 img 특성 text-decoration와 밑줄 캔트). 나는 경계 방법을 사용하여 끝냈다. "링크"클래스의 높이를 정의하여 텍스트 및 아이콘에서 아래쪽 테두리까지의 거리를 늘리거나 줄일 수있었습니다.

이 문제와 다른 사람의 경우, 고정 코드이었다 ...

HTML

내가 추가해야

#home { 

    width: 15px; 
    height: 15px; 

} 

#about { 

    width: 15px; 
    height: 15px; 

} 

#contact { 

    width: 19px; 
    height: 15px; 

} 

#work { 

    width: 16px; 
    height: 15px; 

} 

.link { 

    margin: 0; 
    padding: 0; 
    display: inline-block; 
    margin-left: 20px; 
    margin-right: 20px; 
    margin-top: 12px; 
    height: 18px; 
    font-size: 18px; 
    font-family: arial; 

} 

.link:link { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 

} 

.link:visited { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 

} 

.link:active { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 

} 

.link:hover { 

    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 
    border-bottom: 1px solid #ffffff; 

}

출처

2013-08-17 23:27:14 Allenph

이미지에 텍스트 장식을 추가하는 방법은 무엇입니까?

답변

관련 문제