한 요소, CSS는

main p, main h2, main h3, main h4 { 
 
    width: 268px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 
.center { 
 
    margin: 0 auto; 
 
    width: 268px; 
 
    height: 100px; 
 
    text-align: center; 
 
} 
 

 
.orange-button { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
}

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
    <main> 
 
    <h4> 
 
    Zapraszam! 
 
    </h4> 
 
    <div class="center"> 
 
     <a class="orange-button" href="#"> 
 
     Przejdź do strony głównej! 
 
     </a> 
 
    </div> 
 
    </main> 
 
</body> 
 
</html>

당신이 button의 조각 패딩에서 볼 수있는 바와 같이 div.center

넘어 플러스 자신의 테두리 위 h4에 간다 요소.

정확히 무슨 일이 일어 났는지, 무슨 일이 일어나고 있는지 모르겠습니다. h4

출처

2017-09-04 Krystian Polska

이 orange-button CSS에서 display: inline-block을 추가로

주위 button 특히 .center DIV 넘어 안이 국경 가서는 안

main p, main h2, main h3, main h4 { 
 
    width: 268px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 
.center { 
 
    margin: 0 auto; 
 
    width: 268px; 
 
    height: 100px; 
 
    text-align: center; 
 
} 
 

 
.orange-button { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
}

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
    <main> 
 
    <h4> Zapraszam!</h4> 
 
    <div class="center"> 
 
     <a class="orange-button" href="#"> 
 
     Przejdź do strony głównej! 
 
     </a> 
 
    </div> 
 
    </main> 
 
</body> 
 
</html>

출처

2017-09-04 11:26:20

왜 이것이 이전에 제대로 작동하지 않았고 잘못 되었습니까? –

버튼에 패딩을 추가하여 제목이 겹치고 'h4'에'margin-bottom'을 추가 한 태그에 인라인 블록을 표시하지 않으려 고했기 때문에 –

main p, main h2, main h3, main h4 { 
 
    text-align: center; 
 
} 
 
.center { 
 
    text-align: center; 
 
} 
 
.orange-button { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
}

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 
    <main> 
 
    <h4> 
 
    Zapraszam! 
 
    </h4> 
 
    <div class="center"> 
 
     <a class="orange-button" href="#"> 
 
     Przejdź do strony głównej! 
 
     </a> 
 
    </div> 
 
    </main> 
 
</body> 
 
</html>

이것이 원하는가요? 당신의 CSS에서 하나의 변화

출처

2017-09-04 11:27:17

당신의 .orange-button 클래스에 단지 display: block; CSS를 추가하십시오. 그 밖에 당신이해야 할 일은 없습니다.

감사합니다.

출처

2017-09-04 11:33:46

한 요소, CSS는

답변

관련 문제