Question

我在尝试将标题下方的绿色按钮正确放置在设备上时遇到问题。完整的桌面很好，但随着屏幕变小，按钮将在单词之间断开并进入下一行。在移动设备上，我希望它们能够堆叠，但它们会重叠，而我正在尝试添加底部/顶部边距，但没有任何帮助。

http://www.cooldownjuice.com/collections/menu

我怎样才能让它正确放置？

这是我的代码。（根据其他主题建议添加最大/最小宽度）

.catbtn {
    padding: 10px;
    margin-right: 4px;
    margin-left: 7px;
    background-color: #319E15;
    color: #fff!important;
    text-decoration: none!important;
    font-family: Lato;
    font-size: 100%;
    text-transform: uppercase;
    border-radius: 5px;
    border: 2px solid #319E15;
    width: 100%;
    min-width: 50px;
    max-width: 300px;
}

Answer 1

您需要使用float，就像这样

.catbn {
    display: block;
    float: left;
    margin-top: 10px;
}

此外，我个人认为，当您移除width: 100%时行为会更好，但这是个人偏好的问题。

Answer 2

使用

PersonData

瞧！你可以保持你的中心按钮。如果您愿意，可以浮动：左/右对齐

Answer 3

为避免破坏单词和重叠按钮，请在css中添加以下规则

.catbn{
    white-space:nowrap;
    display:inline-block;
    /*Rest of the css*/
 }

Answer 4

最好的方法是将a设置为阻止。您可以使用float或display:inline-block

以下是修改后的按钮代码。

.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
display: inline-block;/* a as block and inline*/
max-width: 174px; /* Set the width*/
}

希望这对你有帮助。！

如何让按钮的宽度变大，响应性强

4 个答案: