태그 보관물: cross-browser

cross-browser

A 태그에서 너비와 높이 설정 앵커 태그를 갖고 싶습니다. li {

앵커 태그에서 너비와 높이를 픽셀 단위로 설정할 수 있습니까? 앵커 안에 텍스트를 유지하면서 배경 이미지를 갖도록 앵커 태그를 갖고 싶습니다.

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}
<li><a href="#">Something</a></li>



답변

당신은 당신의 앵커 만들 필요가 display: block또는 display: inline-block;다음은 폭과 높이 값을 허용합니다.


답변

을 사용할 수도 있습니다 display: inline-block. 이것의 장점은 블록 요소처럼 높이와 너비를 설정하지만 인라인으로 설정하여 다른 태그를 바로 옆에 배치하여 부모 공간을 허용한다는 것입니다.

디스플레이 속성 에 대한 자세한 내용은 여기를 참조하십시오.


답변

앵커를 UL 목록에 넣지 않으면 이러한 모든 제안이 작동합니다.

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

그런 다음 모든 계단식 스타일 시트 규칙이 Chrome 브라우저에서 재정의됩니다. 너비가 자동이됩니다. 그런 다음 앵커 자체에서 직접 인라인 CSS 규칙을 사용해야합니다.


답변

정확한 복제본은 아니지만 (찾을 수있는 한) 일반적인 문제 입니다.

display:block당신이 필요한 것입니다. 그러나 그 이유를 이해 하려면 사양읽어야합니다 .


답변

나를 위해 일하는 아래

display: block;
width: 100%;


답변