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

我的移动网站上有导航按钮。我想根据不同的屏幕尺寸更改按钮之间的边距，使按钮之间的间隙从一端扩展到另一端。尝试将设置边距设为自动在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代码CSS

<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>

来源

2017-03-12 Sam Mak

媒体查询

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

引导电网

添加下面的类，以网格.col-offset-*-*

- VW和VH

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

我有建议使用媒体查询，因为我假设你已经在使用这些无论是一些敏感的CSS框架或网格系统。

来源

2017-03-12 13:42:33 Vladimir

尝试使用媒体查询，当我选择IP 6它的余量很好，但是当我选择较小的屏幕，例如ip5最后一个按钮显示在第二行 –

这是因为您的按钮没有足够的空间来适应较小的屏幕尺寸当宽度太小而不能使内容可读时，通常会将它们垂直放置。我怀疑你可能对你的问题做了一个坏的方法，我可以建议你以前计划你的内容，因此设计它，所以你可以考虑如何实现你的想法。您可能会首先检查** mobile **，** bootstrap **/** foundation **/** materializecss **，或者其他任何相似的工具。 – Vladimir

尽量保持您的解决方案简单和干净，它应该不是问题。然而，这种细节通常会带来一些令人头痛的问题，并且可能会让您的响应能力出现问题。你应该玩弄环境为你提供什么。如果跳跃尝试添加垂直边距而不是水平。你可以降低字体大小以适应它，但这是个好主意吗？它是否可读？用户友好吗？似乎并不如此 – Vladimir

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

回答

相关问题