Question

我的移动网站上有导航按钮。我想根据不同的屏幕尺寸更改按钮之间的边距，使按钮之间的间隙将按钮从一端扩展到另一端。在CSS按钮中尝试将设置边距设置为自动没有发生任何事情。

这是按钮的CSS

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px auto;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;

}

和html代码

<div id="button">



    <a href='<?php if($prev == "#") { echo $random_url; } else { echo $prev; } ?>' class="button button1" id="prev" title="Previous Pic"><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;Prev</a>

                                     <a href='<?php { echo $random_url; } ?>' class="button button1" id="next" title="Random Pic">Random<i class="fa fa-random"></i></a>

                                     <a href='<?php if($next == "#") { echo $random_url; } else { echo $next; } ?>' class="button button1" id="next" title="Random Pic">Next&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></a>

                    </div>

Answer 1

媒体查询

@media (max-width: 600px) { .button { margin: 10px 10px; // Vertical, Horizontal } }

引导网格

将以下类添加到网格.col-offset-*-*

- VW和VH

.button { margin: 1vh 1vw; // Vertical, Horizontal }

我建议使用媒体查询，因为我假设您已经在使用这些响应式CSS框架或网格系统。

根据屏幕尺寸调整按钮之间的边距

1 个答案: