에 대한 높이 속성을 설정하는 방법은 미리 정의 된 높이는 SPAN
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
로하지만 인라인 요소 "높이"속성이 작동하지 않습니다되어 기간 이후 신축성 코드를 다음 확인해야합니다.
대신 div을 사용해 보았지만 위쪽 요소의 너비까지 확장됩니다. 폭은 유연해야합니다.
누구나이 좋은 해결책을 제안 할 수 있습니까?
미리 감사드립니다.
CSS에서 display:inline-block으로 지정하면 원하는대로 처리 할 수 있습니다. 쿼크 모드 있듯이 IE6/7이 가진 것 작업 : 인라인 :
IE 6/7은 천연 디스플레이 요소 값을 받아 호환성 측면에서
.
왜이 경우 스팬이 필요합니까? 높이를 스타일링하려면 div를 사용할 수 있습니까? display: inline으로 div를 시도해 볼 수는 있지만 실제로 동일한 기간을 수행하고 있기 때문에 동일한 문제가 발생할 수 있습니다.
또는 전부 내 얘기 일을 무시하고 henasraf의 대답 : –
아래로 투표 댓글 그냥 합법적으로 기여하고자하는 사람들을 낙담을 사용합니다. 멈춰! 대신 건설적인 피드백을 제공하거나 문제에 대한 자신의 견해를 지적하십시오. – Aaron
사용
.title{
display: inline-block;
height: 25px;
}
유일한 트릭은 브라우저 지원이다. Check if your list of supported browsers handles inline-block here.
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
그러나 가장 쉬운 해결책은 블록 수준 요소로 .title을 치료하고, 적절한를 사용하여 :
다음 시도 할 수 있습니다, 당신은 그것을 블록 요소를 만들고 싶어하지 않는 가정 표제 태그 <h1> ~ <h6>. 모든 브라우저에서 인라인 블록 작업 :
Quirkly만큼, IE (6/7), 당신은 "줌 : 1"와 hasLayout의 트리거 경우
네 말이 맞아, 나는 지금으로 향했다. – Kelvin
이 표시를 확인하는 것입니다 후 인라인 표시를 설정 인라인 블록으로 동작합니다.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
감사합니다. I.devries, 귀하의 코드를 사용했습니다. IE6/7에서 작동하길 바랍니다. – Kelvin
스팬 스팬 (또는 그 문제에 대한 임의의 다른 요소) 테이블 셀처럼 작동하도록 { display: table-cell; height: (your-height + px); vertical-align: middle; }
는 높이가 지정되어야한다. 나는 경간에 높이를주고, 그들은 잘 작동하지만, 당신이 원하는 것을하기 위해 높이를 추가해야합니다.
물론 또 다른 옵션은 (여기 JQuery와) 자바 스크립트를 사용하는 것입니다
는$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
당신은 타이틀 제목 태그 (H1, H2, H3을, ...)을 사용한다. 의미 상으로 정확합니다. – Pickels
예, 당신은 맞음입니다. 도움을 주신 모든 분들께 감사드립니다. 이것은 내 마지막 CSS입니다.그것은 나를 위해 잘 작동합니다 : – Kelvin