一个元素等元素，填充超越DIV HTML ON，的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元件。

我不知道到底发生了什么，发生了什么。

此边框button不应超越.center格，尤其是不应该去到h4

来源

2017-09-04 Krystian Polska

在orange-button CSS添加display: inline-block

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

为什么这个wans't没有正确和错误的工作？ –

因为您在按钮中添加了填充项，所以它在标题上重叠，如果您不想在标签中显示内嵌块，只需在'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>

这是你想要的吗？

来源

2017-09-04 11:27:17

在你的CSS只有一个变化，

请您.orange-button类添加只是display: block; CSS。没有别的你需要做的。

谢谢。

来源

2017-09-04 11:33:46

一个元素等元素，填充超越DIV HTML ON，的CSS

回答

相关问题