Как создать отзывчивые кнопки? - PullRequest
Новая
       17

Как создать отзывчивые кнопки?

0 голосов
/ 27 октября 2018

Я создал несколько кнопок в горизонтальной линии, но теперь я заметил, что они не реагируют на изменения, когда я уменьшаю размер браузера.

Мне удалось сделать свой логотип отзывчивым с помощью 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>

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Вы также можете использовать 

display:block;

вместо 

display:inline-block;

в случае телефонов

0 голосов
/ 28 октября 2018

Вы должны использовать Flex, который был добавлен в HTML5.

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

PS Вы можете в дальнейшем играть с line-width и margin-right, чтобы получить желаемый результат.

...