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

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

완전 무지한 질문이지만, 여기 있습니다.

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>​

피들

기본적으로 단추를 에뮬레이트하여 입력 필드 옆에 있는 단추처럼 스팬(또는 스팬)을 만들려고 합니다. 입력 필드는 Enter에서 오류를 생성하는 자동 채우기 생성기 때문에 실제로 필요하지 않습니다.지금으로서는 이것이 빠른 해결책이 될 것이라고 생각했지만 분명히 아닙니다.

감사해요.

범위는 인라인 요소입니다.너비나 높이가 없습니다.

블록 레벨 요소로 변환하면 치수 지시를 수락합니다.

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

사용해 보십시오.div대신에span또는 CSS를 사용합니다.display: block;또는display: inline-block;—span기본적으로 다음을 수행할 수 없는 인라인 요소입니다.width그리고.height특성.

@Hamed에서 영감을 받아 다음과 같은 내용을 추가했습니다.

display: inline-block; overflow: hidden; 

스팬은 블록 요소를 만들 때만 폭과 높이를 사용합니다.

span {display:block;}

@Paul의 설명에 따르면, display: block이 지정된 경우 스팬은 인라인 요소 및 다음 줄에 나타나는 요소로 중지됩니다.

저는 제 스판 높이 문제에 대한 해결책을 찾기 위해 이곳에 왔고 저만의 해결책을 얻었습니다.

추가 중overflow:hidden;그리고 그것을 인라인으로 유지하면 IE8 Quirks 모드에서 방금 테스트한 문제를 해결할 수 있습니다.

spans는 기본적으로 인라인으로 표시됩니다. 즉, 높이와 너비가 없습니다.

추가해 보십시오.display: block당신의 범위까지.

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

이 모든 문제를 해결하는 방법을 사용합니다.

해보세요..

span.product__specfield_8_arrow
{
    display: inline-block;
}

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

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

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

더 여기에 더

이제 동일한 효과를 모방하는 여러 가지 방법이 있지만 사용 사례에 따라 속성을 추가로 조정할 수 있습니다.위에서 언급한 바와 같이, 이것은 작동합니다.

.product__specfield_8_arrow { display: inline-block } 

하지만 또한

.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table

이 JSFidle은 이 경우 이러한 디스플레이 속성이 얼마나 유사한지 보여줍니다.

관련 논의는 이 SO 게시물을 참조하십시오.

이 문제를 해결하는 방법은 경계가 없는 읽기 전용 입력 태그를 사용한 다음 원하는 대로 속성을 설정할 수 있습니다.

 <input  type="text" readonly 
   style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;" 
      [value]="statusMessage">

언급URL : https://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span