当浏览器大小变小时，锚标签重叠

Question

好的，这是我遇到的问题。我希望就此寻求一些指导。我确信我做错了什么，但那件事我不知道。我附上了两个屏幕截图，以显示我在这里做的事情。第二个将显示锚标记，它们显示：当浏览器窗口变小时，内联在当前重叠。

****正确显示****

****错误地显示****

#linkWrapper A {
    padding: 10px;
    border: 5px dashed #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
     -moz-border-radius: 20px; 
    width: 200px;
    height: 30px;
    margin: 0 auto;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 30pt;
    display: inline;
}

Answer 1

由于你不发布html，我的猜测是height CSS属性不足以满足整个按钮的高度。

相反，请使用

<强> CSS

#linkWrapper A {
    height: 100px;
    line-height: 100px;
}

为跨浏览器兼容性包含line-height属性是一个好习惯。

Answer 2

一个建议是尝试在％上使用它的高度和宽度，这有助于大量的时间，以及问题

关于你的问题，当减少div或span字体大小的屏幕保持不变时，这就是为什么你会在上面和下面看到两个第一行的原因，你可以在CSS中使用@media查询来帮助你自定义不同的屏幕宽度和高度变体

  @media (min-width: 481px) and (max-width: 850px) {

   #linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
 -moz-border-radius: 20px; 
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
}

注：

我刚刚复制并粘贴了css，请根据需要更改css属性，如上所示，您可以为任何宽度尺寸的屏幕提供

如果您遇到麻烦，请告诉我