앵커 태그 스타일링 문제의 스팬 태그

CSS 스타일링과 관련하여 지금 내가하고있는 웹 개발자의 특정 측면에 문제가 있습니다. 다음 CSS로 스타일이 적용된앵커 태그 스타일링 문제의 스팬 태그

<div id = "spaninsidea"> 
<ul id="spantest"> 
    <li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li> 
    <li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li> 
</div>

내가 가지고하면 다음과 같은 HTML입니다

#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; } 
#spaninsidea li { display: inline;} 
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px; 
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green; 
float: left; } 
#spaninsidea li a span {background-color:orange; margin-top:50px}

내가 얻을하려고하는 중간에 앉아 링크 내부의 spaned 텍스트입니다 태그의 스팬에 여백 설정을 적용하려고하면 단순히 자리에 있지만 글꼴 색을 변경하면 크리켓을 재생합니다. 나는 왜 그것이 작풍을 그러나 어기는지 그림을 기울인다.

프론트 엔드의 내용은 새로운 것이므로, 일반적으로 볼 수있는 눈부신 문제가있는 경우이를 지적하십시오.

건배

출처

2011-08-04 Morn

당신은 단지 당신의 스팬에 자동으로 왼쪽 및 오른쪽 여백을 설정하고 당신이 갈 수있을 것 같아요 - jsfiddle을 설정하면 쉽게 될 것입니다. –

@BethBudwig 여백은 인라인 레벨 요소에는 적용되지 않습니다. 그리고 그 기간은이 맥락에서 쓸모가 없습니다. –

@RikudoSennin 그러면 제안 사항이 표시됩니다. – Morn

보통 a에는 span이 없어야합니다. 그것은 첫 번째 부분이 될 것입니다 ... 나는 에도 text-align:center;을 적용 할 것을 제안합니다.

업데이트 : 여기에 작업 버전을 참조하십시오 http://jsfiddle.net/2eLer/ 당신은 단지 같거나 a의 높이보다 큰 span의 line-height을 설정해야합니다.

출처

2011-08-04 21:29:43

이 경우,'span'은 불필요 합니다만, 일반적으로''a '안에'span'이 있어서는 안됩니다. " 그것은 완벽하게 유효하며 복잡한 스타일의 링크에 종종 필요합니다. – tw16

@AndrewPeacock - 그건 대우를 받았습니다. 기본적으로 태그의 중앙 텍스트를 가져오고 싶지만 올바른 방법으로 처리하기를 원하십니까? – Morn

필요하다면 span 태그를 사용할 수 있지만, 여기에 http://jsfiddle.net/nAe7G/1/가 있지만 모양은 그대로 유지합니다. 그러나 모든 것은 당신이하고 싶은 것에 달려 있습니다. –

당신은 모든 <span>를 사용하지만, 링크 자체의 padding 속성을 변경하지 마십시오.

출처

2011-08-04 21:28:26

스팬은 요소를 차단하지 않는 인라인 요소이므로 마진과 패딩에 응답하지 않아야한다고 생각하는 것처럼 중요합니다.

"inline-block"이라는 CSS 표시 속성이 있습니다.이 속성을 사용하면 요소가 범위 나 다른 인라인 요소처럼 떠 다니게되지만 마진 및 채우기와 관련하여 div처럼 동작합니다.

출처

2011-08-04 21:59:33

앵커 태그 스타일링 문제의 스팬 태그

답변

관련 문제