Question

我在水平线上创建了多个按钮，但是现在我注意到当我减小浏览器尺寸时它们仍然没有响应。

我设法用calc(100%-1em);使徽标响应，但是我猜想这无济于事，因为按钮不是width: 100%，而且我连续有多个按钮。

右侧的滚动条始终位于我不需要的按钮上。

感谢您的帮助，谢谢！

.buttons-header {
margin-left: 1.5em;
}  



.buttons    {
            border: none;
            display: inline-block;
            height: 2em;
            width: 20em;
            line-height: 1.5em;
            margin-top: 0.5em;
            padding: 0.4em 0.4em;
            font-family: monospace;
            font-style: normal;
            text-align: center;
            text-decoration: none;
            background-color: #858585;
            color: #f0ffff;
            cursor: pointer;
            }

html：

 <div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>

Answer 1

您应该使用HTML5中添加的Flex。

.flex-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.buttons-header {
margin-left: 1.5em;
} 
.buttons{
            border: none;
            height: 2em;
            width: 20em;
            line-height: 3em;
            margin-right:0.5em;
            margin-top: 0.5em;
            padding: 0.4em 0.4em;
            font-family: monospace;
            font-style: normal;
            text-align: center;
            text-decoration: none;
            background-color: #858585;
            color: #f0ffff;
            cursor: pointer;
 }

<div class='flex-container'>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
<div class="buttons-header"> <a href="https:www.sample.info/" class="buttons">News</a></div>
</div>

P.S。您可以进一步玩line-width和margin-right以获得所需的结果。

Answer 2

您也可以使用

export const VERSION = 'Git Hash: some_hash'

代替

display:block;

对于手机

如何创建响应式按钮？

2 个答案: