높이와 너비가 스팬에 적용되지 않습니까?

254

멍청한 질문이지만 여기에 있습니다.

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>

깡깡이

기본적으로 버튼을 에뮬레이트하려고합니다. 스팬 (또는 무언가)이 입력 필드 옆의 버튼처럼 보이도록 만들면 실제로 입력 할 필요가없는 자동 채우기 생성기 때문에 입력 필드 옆에있는 버튼처럼 보일 수 있습니다. 이것은 현재로서는 빠른 해결책이지만 분명히 아닙니다.

감사.

css html width

— 카일
소스

2

stackoverflow.com/questions/2343989/…

— Edan Maor

2

또한 표준, 특히 w3.org/TR/CSS2/visudet.html#the-width-property 및 w3.org/TR/CSS2/visudet.html#the-height-property를 확인하십시오. "적용 대상 : 대체되지 않은 인라인 요소, 테이블 행 및 행 그룹을 제외한 모든 요소 "

— out at

426

스팬은 인라인 요소입니다. 너비 나 높이가 없습니다.

블록 레벨 요소로 바꿀 수 있으며, 치수 지시문을 수락합니다.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

— Basheer AL-MOMANI
소스

9

고마워요 전에 display : block을 시도했지만 인라인 블록으로 수정했습니다.

— Kyle

21

그게 문제입니다. 경우 display: block지정된 스팬은 다음 줄에 표시 한 후 인라인 요소 및 요소로 멈춘다. 인라인이지만 원하는 너비가 될 수있는 요소가 필요합니다.

— Paul

6

더 나은 솔루션은 사용자 디스플레이입니다. 인라인 블록

— Anant

37

사용해보십시오 div대신의를 span또는 CSS를 사용 display: block;하거나 display: inline-block;- span참을 수 없어 인라인 요소의 기본입니다 width및 height특성.

— 이삭
소스

9

div는 범위를 의미 적으로 대체하지 않습니다. 범위는 텍스트 컨테이너이고 div는 레이아웃 컨테이너입니다. Developer Art와 같은 인라인 블록 스타일을 적용하는 것이 정답입니다.

— Brian Scott

3

이 질문은 div가 본질적으로 의미 론적으로 부적절하다는 것을 나타내는 컨텍스트를 제공하지 않습니다.

— Isaac Isaac

1

실제로 op의 마크 업을 읽으면 실제로 해당 요소가 단순히 배경 이미지를 표시하는 데 사용되는 것처럼 보입니다. 이 경우 div가 실제로 더 적합합니다. -1은 Isaac의 원래 의견에서 제거되었습니다.

— Brian Scott

또한 스팬으로 전환하기 전에 div를 사용하려고했는데 항상 이전 div 아래에 표시됩니다. Span :)

— Kyle

22

@Hamed에서 영감을 얻어 다음을 추가하고 나에게 도움이되었습니다.

display: inline-block; overflow: hidden;

— 올레
소스

11

스팬은 요소를 블록으로 만들 때만 너비와 높이를 사용합니다.

span {display:block;}

— 투 히트 라만
소스

14

display: inline-block;더 나은 것 같아

— 151291

이 방법으로 모든 범위에 대해 변경 할 수 있으므로 수업을 사용하는 것이 좋습니다.

— Hola Soy Edu Feliz Navidad

9

@Paul의 주석에 따라 display : block이 지정된 경우 span은 다음 줄에 나타난 후 인라인 요소 및 요소로 중지됩니다.

스팬 높이 문제에 대한 해결책을 찾기 위해 여기에 왔으며 내 해결책을 얻었습니다.

overflow:hidden;인라인으로 추가 하고 유지 하면 IE8 Quirks 모드에서 방금 테스트 한 문제가 해결됩니다.

— 하메드 알리 칸
소스

나는 overflow:hidden;이 맥락에서 계속보고 있다. MDN은 "스크롤바없이 컨텐츠가 잘립니다" 라고 말합니다 . 직관적이지 않은 것 같습니다. 여기서 무엇을합니까?

— Bob Stein

8

span기본적으로 인라인으로 표시되므로 높이와 너비가 없습니다.

display: block스팬에를 추가해보십시오 .

— 에단 메이어
소스

6

스팬은 인라인 요소로 시작합니다. 예를 들어 표시 속성을 차단하도록 변경할 수 있으며 높이 / 폭 속성이 적용되기 시작합니다.

2

span {display:block;} 또한 줄 바꿈을 추가합니다.

이를 피하려면를 사용 span {display:inline-block;}하여 인라인 요소에 너비와 높이를 추가하고 블록 내에서 너비와 높이를 정렬 할 수 있습니다.

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

더 여기에

— 마킹
소스