如何在一个小屏幕上保持一排整齐的按钮

Question

如果下面的html代码在小屏幕上运行，则一个或多个按钮自然会移动到＆＃34;下面的行＆＃34;，调整到屏幕大小。原则上这很棒，但不幸的是，从行中移动的任何按钮都会粘在上面的按钮上。那......丑陋而且功能不太好。

如何将它们垂直放置？

＆＃13;

＆＃13;

<style>

.button {
    background: #fcfcfc;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -moz-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -ms-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -o-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: linear-gradient(to bottom, #fcfcfc, #d6d6d6);
    font: large;
    color: ButtonText;
    display: inline-block;
    padding: 5px 12px 5px 12px;
    border: solid #b8a8a8 1px;
    text-decoration: none;
}

.button:hover {
    border: solid #7b6b6b 1px;
    text-decoration: none;
}

</style>

<center>

<div class="container">
    <a href="https://www.archive.org/" class="button">Archive 1</a>
    <a href="https://www.archive.org/" class="button">Archive 2</a>
    <a href="https://www.archive.org/" class="button">Archive 3</a>
    <a href="https://www.archive.org/" class="button">Archive 4</a>
</div>

</center>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您试图影响内联元素（锚标记）的间距，该元素不像块元素（例如列表项）那样明确。尝试将锚标记包装在块元素中，并将样式应用于包装对象。 请查看此帖子以供参考：Padding for Inline Elements

Answer 2

.button {
    background: #fcfcfc;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -moz-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -ms-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -o-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: linear-gradient(to bottom, #fcfcfc, #d6d6d6);
    font: large;
    color: ButtonText;
    display: inline-block;
    padding: 5px 12px 5px 12px;
    border: solid #b8a8a8 1px;
    text-decoration: none;
}

.button:hover {
    border: solid #7b6b6b 1px;
    text-decoration: none;
}

@media screen and (max-width: 480px) {
    .button {
        display: block;
        width: 200px;
    }
}

<center>

<div class="container">
    <a href="https://www.archive.org/" class="button">Archive 1</a>
    <a href="https://www.archive.org/" class="button">Archive 2</a>
    <a href="https://www.archive.org/" class="button">Archive 3</a>
    <a href="https://www.archive.org/" class="button">Archive 4</a>
</div>

</center>

Answer 3

感谢@DanielC的link我能找到解决方案。很简单，您只需要在margin样式上添加.button个定义。这样，无论屏幕大小如何，按钮总是整齐排列！ 8 - ）

<style>

.button {
    background: #fcfcfc;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -moz-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -ms-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: -o-linear-gradient(top, #fcfcfc, #d6d6d6);
    background-image: linear-gradient(to bottom, #fcfcfc, #d6d6d6);
    font: large;
    color: ButtonText;
    display: inline-block;
    padding: 5px 12px 5px 12px;
    margin: 5px 5px 5px 5px;
    border: solid #b8a8a8 1px;
    text-decoration: none;
}

.button:hover {
    border: solid #7b6b6b 1px;
    text-decoration: none;
}

</style>

<center>

<div class="container">
    <a href="https://www.archive.org/" class="button">Archive 1</a>
    <a href="https://www.archive.org/" class="button">Archive 2</a>
    <a href="https://www.archive.org/" class="button">Archive 3</a>
    <a href="https://www.archive.org/" class="button">Archive 4</a>
</div>

</center>