CSS가 올바르게 렌더링되지 않습니다.

CSS로 텍스트 영역을 스타일 지정하려고하지만 올바르게 렌더링되지 않았습니다. 테두리의 일부가 표시되지 않습니다. Heres는 스크린 샷 Screenshot CSS가 올바르게 렌더링되지 않습니다.

이 텍스트 영역

#pheedform textarea { 
    -moz-border-top-left-radius:4px; 
    -moz-border-top-right-radius:4px; 
    -webkit-border-top-right-radius:4px; 
    -webkit-border-top-left-radius:4px; 
    border-top-left-radius:4px; 
    border-top-right-radius:4px; 
    border:1px solid rgba(153,153,153,1); 
    border-bottom:thin; 
    width:100%; 
    padding:4px; 
}

에 대한 CSS 코드 및 텍스트 영역

.pheed-options { 
     background:#EEEEEE; 
     border-top:none; 
     padding:5px; 
     position:relative; 
     top:-7px; 
     width:100%; 
     border:1px solid #666666; 
     border-right:1px solid #666666; 
    } 
    .pheedOptionItem { 
     padding:5px; 
     border-right:solid 1px #999999; 
    }

아래에있는 상자이 CSS 코드 그리고이 html로

입니다

<div class="textarea_fix"> 
       <textarea name="pheed" cols="50" id="pheed"> 
       </textarea> 
       <div class="pheed-options"> 
         <span class="pheedOptionItem"> 
         <a href="#" class="pheedAdd_photo">Add Photo</a> 
         </span> 
         <span class="pheedOptionItem"class="pheedOptionItem"> 
         <a href="#" class="pheedPostToTwitter">Post to Twitter</a> 
         </span> 
         <span class="pheedOptionItem"> 
         <a href="#" class="pheedPostToFacebook">Post to Facebook</a> 
         </span> 
         <span> 
         <a href="#" class="pheedBtn">Pheed</a> 
         </span> 
       </div> 
       </div>

출처

2011-10-28 MrFoh

jsfiddle plz (: –

Fiddle : http://jsfiddle.net/d56fY/ –

@bitsMix 팁 주셔서 감사합니다 – MrFoh

두 요소를 모두 패딩으로 설정해야합니다. #pheedform textarea의 패딩을 5px 또는 .pheed-options에서 4px으로 변경하십시오.

출처

2011-10-28 17:19:19 scumah

설정 폭 : 10 100 % + 1px border-left 및 1px border-right가 발생하기 때문에 0 %가 원인입니다.

width 속성을 모두 제거하거나 (display : block에만 의존) 고정 된 정적 값을 지정하십시오.

출처

2011-10-28 17:11:59 Joshua

스크린 샷과 jsfiddle의 모습을 보면 요소가 픽셀이거나 텍스트 영역보다 두 개인 것으로 보이며 부모보다 폭이 넓어서 잘릴 것 같고 overflow: hidden 인 부모 요소가있는 것 같습니다. .

나는 padding: 4px에 padding: 5px에서 .feed-options에 패딩을 조정 그것은 jsfiddle에 줄 지어 : http://jsfiddle.net/blineberry/d56fY/5/

이 부모 요소 넘치는 것을 방지 할 수있다. 그렇지 않은 경우 폭을 100 % 미만으로 조정하거나 패딩/여백/경계선을 계속 조정하여 overflow: hidden 요소가 넘칠 때까지 계속 조정하십시오.

출처

2011-10-28 17:19:28 Brent

CSS가 올바르게 렌더링되지 않습니다.

답변

관련 문제