新行的 HTML 内容具有重叠背景效果

Question

下面是我的问题，这些是相同的链接，橙色背景是在 css 中设置的悬停效果。正如您所看到的，当窗口被压缩时，链接的文本会移动到下一行以适合屏幕。但是每一行的背景效果都掩盖了第二行。我可以将显示设置为 block 状，但这会将背景拉伸(stretch)到窗口的 100%，当页面不窄时，这不是我想要的。

提前致谢

编辑:代码

<div class="PageSection">
    <a class="LinkButton" href="">This Is My Link, There Are Many Like It But This One Is Mine</a>
</div>

.PageSection {
    width: 100%;
    margin: 50px 0px 50px 0px;
    text-align: center;
    font-size: 30px;
}

input[type="button"],
input[type="submit"],
.LinkButton {
    padding: 5px 10px 5px 10px;

    cursor: pointer;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    line-height: 100%;

    border: none;
    background-color: transparent;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
    background-color: #FF5A19;
}

编辑: 我知道我可以设置 line-height css 属性，但这会使链接的间距很难看，而且我的目标也是背景颜色的正方形 block ，只是不要达到页面的整个宽度。

Answer 1

假设您的填充是为了创建额外的 block 效果。

尝试

.PageSection {
    width: 100%;
    margin: 50px 0px 50px 0px;
    text-align: center;
    font-size: 30px;
}

input[type="button"],
input[type="submit"],
.LinkButton {
    /*padding: 5px 0 5px 0;*/
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    line-height: 100%;
    border: none;
    background-color: transparent;
    background-clip: padding-box;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
    background-color: #FF5A19;
    box-shadow: 10px 0 0 0px #FF5A19,-10px 0 0 0px #FF5A19;
}

链接上您需要的只是链接上的 background-clip: padding-box; 和一些 box-shadow 以覆盖由于内联元素行为而无法到达的额外位。

编辑:JSFiddle