HTML/CSS : : 유사 요소 오버플로 후 부모

버튼처럼 보이도록 링크의 스타일을 지정했습니다. 이 '버튼'에는 :after 요소를 사용하여 아이콘 글꼴로 추가 된 아이콘이 포함됩니다.HTML/CSS : : 유사 요소 오버플로 후 부모

반응 형 레이아웃이므로 단추는 여러 화면 크기에서 작동해야합니다. 유연한 컨테이너 내부에 배치하면 :after 요소가 부모 오버플로됩니다.

예 :

<div class="wrap"> <a href="/" class="btn icon">Test</a> </div>

다음 CSS 코드 :는 HTML은 기본적으로 같은 것을 보이는

.wrap { 
    background: grey; 
    width: 20%; 
    padding: 20px; 
} 

.btn { 
    display: inline-block; 
    padding: 15px; 
    background: linear-gradient(to top, #ccc, #fafafa); 
    border: 1px solid #999; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,.55); 
    max-width: 100%; 
} 

.icon { 
    font-family: FontAwesome; 
} 

.icon:after { 
    content: "\f04e"; 
    margin-left: 8px; 
}

을이 바이올린 참조 : 당신이 좁은 http://jsfiddle.net/r6uLJ/

을 창 크기, 두 개의 삼각형 (파란색) 오버플로가 나타납니다. 회색 - 흰색 그라데이션). 그것을 피하기 위해 할 수있는 일이 있습니까? 그렇지만 여전히 의사 요소를 사용하고 있습니까?

출처

2013-12-09 Sven

가 왜'최대 폭을 지정 했습니까? –

@MarcAudet'.btn'이 넘친 것을 막기 위해서. – Sven

이 경우 최대 폭은 도움이되지 않습니다. 귀하의 예제에서 버튼의 텍스트 + 아이콘/내용은 버튼의 폭을 결정하며, 이는 오버플로 조건을 야기 할 래퍼 너비보다 더 넓을 수 있습니다. 래퍼의 너비가 줄어들면 버튼이 어떻게 동작하는지 생각해야합니다. 이 문제를 해결하는 데는 여러 가지 방법이 있습니다. 솔루션 범위를 좁히는 데 도움이되는 디자인 지침을 줄 수 있습니까? –

.btn { 
    overflow: hidden; 
}

트릭을해야합니다.

출처

2013-12-09 19:57:17

이 시도 :

* { 
    box-sizing: border-box; 
}

당신의 일이 있기 때문에 (기본 하나) 폭의 상단에 패딩을 추가하는 박스 모델의 오버 플로우. 그래서 가진 100 % 폭은 부모의 100 %이고 당신은 내용이 2 줄에 랩 때 30 픽셀을 오버플로 15 픽셀의 패딩을 ... 추가하면

당신이 예를 들어, 브라우저에 따라 접두사해야 할 수 있습니다

-box-sizing: border-box 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;

출처

2013-12-09 20:00:03 Stefan

.btn 규칙 집합에서 max-width: 100% 규칙을 제거하면 문제가 발생하지 않습니다.

참조 : .btn``100 %`: http://jsfiddle.net/audetwebdesign/r6uLJ/3/이

출처

2013-12-09 20:04:55

HTML/CSS : : 유사 요소 오버플로 후 부모

답변

관련 문제