CSS3 버튼이 전체 div를 아래로 밀어 넣습니다.

사용자 정의 CSS3 버튼 생성기 (http://www.cssportal.com/css3-button-generator/)를 사용하여 웹 사이트 버튼에 CSS3를 포함하려고합니다. 그러나 몇 가지 성가신 문제가 발생합니다. 전체 div가 아래쪽으로 밀려납니다! 를 포함 사업부의 CSS는 다음과 같습니다CSS3 버튼이 전체 div를 아래로 밀어 넣습니다.

.login { 
    position: absolute; 
    right: 10px; 
    top: 10px; 
    color: #DDD; 
    font-size: 14px; 
}

그리고 버튼의 CSS :

.button { 
font-family: Arial; 
    color: #ffffff; 
    font-size: inherit; 
    padding: 7px; 
    text-decoration: none; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-box-shadow: 0px 1px 3px #666666; 
    -moz-box-shadow: 0px 1px 3px #666666; 
    text-shadow: 1px 1px 3px #666666; 
    border: solid #003366 2px; 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#001a33)); 
    background: -moz-linear-gradient(top, #42aaff, #001a33); 
}

당신이 웹 사이트 자체의 HTML을 확인하려면, 그것은 http://www.nosfistis.com/

의 #navbar이야

출처

2012-12-11 Mike Drakoulelis

CSS 규칙 패딩 : 7px로 인해 아래로 밀렸습니다. 현재 이러한 모든 요소가 절대 위치 지정을 사용하여 10 픽셀 아래로 밀렸습니다. 당신은 부정적인 여백 (보통 나쁜 생각)으로 그 버튼 하나를 당기거나 다른 것들을 모두 내려야 할 것입니다. 일반적으로 이와 같은 상황에서 요소 높이를 유지하려고합니다 (예 : 더 작은 요소에 패딩 추가).

출처

2012-12-11 03:11:04

실제로 이것은 문제였습니다. 스팬의 텍스트 영역 옆에 다른 버튼도 있었고 버튼은 아래쪽으로 밀렸지만 이제는 더 이상 없습니다. 그럼, 그 버튼 패딩을 유지하고 싶다면, 나머지 엘리먼트들 각각에 패딩을 추가하는 것인가? –

CSS3 버튼이 전체 div를 아래로 밀어 넣습니다.

답변

관련 문제