html - 如何响应式地让按钮调整到全宽

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% 时，行为会更好，但这是个人喜好问题。