내가 <a href="http://jsfiddle.net/fvus9/" rel="nofollow">this</a> 코드가 이러한 배경

Question

을 중지하는 방법 :

<a class="botton_menu" href="#">first</a> 
<a class="botton_menu" href="#">second</a> 
<a class="botton_menu" href="#">third</a> 

a.botton_menu 
{ 
    padding:0 14px 0 7px; 
    font-family:Arial; 
    font-weight:bold; 
    font-size:50px; 
    line-height:45px; 
    background-color:#FF0000; 
    color:#781a77; 
    margin-bottom:3px; 
    height:46px; 
    letter-spacing: -3px; 
    text-decoration:none; 
    display:block; 
} 

을 내가 갖고 싶은 그 빨간색 배경 색상만큼 텍스트가 아닌 화면 크기까지 (디스플레이 : 블록).

어떻게하면됩니까?

Answer 1

a 요소가 display:block 인 것으로 주장하는 경우 float:left이 필요합니다. 그러면 배경/요소는 내용만큼 길어질 것입니다.

Answer 2

당신은 a 요소의 요소를 만들 수 있습니다

<a><span>foo</span></a> 

Answer 3

display:block;jsfiddle은 그것이 그렇게 스트레칭 원인 것입니다.

솔루션 : display:block;에서

사용 float:left; (? 또는 당신이 처음에 block로 설정하는 이유는 무엇 기본, display:inline; 사용) display:inline-block;에

1. 변경합니다.

2. width 속성을 수동으로 설정하십시오.

분명히 세 번째 옵션은 원하는 너비를 알고있는 경우에만 작동합니다. 다른 두 가지 솔루션은 요소를 쌓아두기보다는 서로 옆에 배치합니다. 두 경우 모두 다음 요소로 넘어 가서 다음 줄로 넘어 가야합니다.

display:inline-block; 또는 display:inline;으로 줄 바꿈으로 확인할 수 있습니다. 하드 코딩 된 <br> 태그 또는 CSS에서 :after 선택기를 사용하고 거기에 줄 바꿈을 추가하십시오. float:left;으로 clear:both;을 추가해야합니다. this이 문제를 해결할 수

Answer 4

사용 display:inline-block;

와 태그 사이에 넣어 <br/>.