링크 배경이 단색 배경 대신 한 줄에 표시됩니다. 수정 하시겠습니까?

Question

제목과 마찬가지로 하나의 단색으로 요소의 배경을 가져올 수 없습니다. 대신 내 코드는 각 행을 색상으로 만듭니다. 나는 심지어 새로운 div에 php 요소를 배치하고 그 배경색을 설정하려고했지만 동일한 일을한다. 모든 조언이 유용합니다.

사이트 : http://www.whatsatyourcore.com, 하단 위젯 제목

HTML : <a class="teaser-title-top" title="Social customer service and your marketing strategy" href="http://whatsatyourcore.com/?p=78"> Social customer service and your marketing strategy</a>

CSS :

.teaser-title-top { background: black;} 


a.teaser-title-top { 
color: #fff;} 

위의 "코드 상자"예이다. 첫 번째는 내 제목에서 배경이 수행하는 작업입니다. 두 번째 것은 내가 원하는 것입니다.

Answer 1

div에 포장하고 으로 설정하면 효과가 있습니다. background-color을 설정하는 요소는 블록 레벨 요소 (div)이어야합니다. display: block; 인 블록 레벨 요소로 표시되도록 요소를 설정할 수 있습니다. 그렇지 않으면 인라인 콘텐츠의 배경에 색이 칠해집니다.

Answer 2

당신은 그 안에 무엇이 있는지 알아볼 것입니다. 같은 시도 :

<div id="title-box"> 
    <div class="teaser-title-top"> 
      <a href="http://whatsatyourcore.com/?p=78" title="Social customer service and your marketing strategy"> Social customer service and your marketing strategy</a> 
    </div> 
</div> 

을 그리고 다른 답변과 마찬가지로 .teaser 타이틀 정상에게

Answer 3

스타일을, 당신은 래퍼 요소 스타일을 지정할 수 있습니다. 그러나 앵커 텍스트의 스타일을 직접 지정하려면 다음을 시도하십시오.

문제는 텍스트의 선 높이입니다. 보시다시피, 간격이 있습니다. 만약 너라면. 텍스트의 크기에 비해 줄의 높이가 더 큽니다.

예를 들어, #bottom a { line-height: 100%; } (글꼴 크기가 무엇으로 설정되어 있는지)을 설정하면 차이가 없어집니다. 간격도 사라집니다. 위쪽/아래쪽 패딩과 함께 줄 간격을 "바꿀"수 있습니다.

Answer 4

는 CSS 파일에서

#bottom .teaser-title-top { 
     color: white; 
} 

작동이 희망을 시도