Кнопки «Отправить» CSS сжимаются при расположении рядом - PullRequest
0 голосов
/ 26 апреля 2018

У меня есть несколько стильных кнопок отправки CSS, но атрибут margin не работает, когда две кнопки падают рядом. Пожалуйста, смотрите мой образец изображения ниже.

Кнопки просто попадают в один div, вот так:

<div>
    <input type="submit" value="Confirm My Order.">
    <input type="submit" value="Revise My Order.">
</div>

Вот CSS:

input[type=submit]{
    margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
    background: #808080;
    padding: 5px 12px; /* padding inside the button */
    border:1px solid #808080;
    cursor:pointer;
    -webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    color:#fff;
}

Учитывая правильное поле, я не думаю, что кнопки будут целоваться так. Есть мысли, почему не работает маржа?

Заранее благодарю.

Consecutive submit buttons

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

То же, что дан ответ, но лучше объяснение.

При использовании нескольких входов в поле css вы не хотите использовать запятые, для чего требуется простой пробел между каждым значением.

input[type=submit]{
    margin:0.6em 2em 1em 1em;
}

Для получения дополнительных пояснений по полям просмотрите эту полезную ссылку: https://developer.mozilla.org/en-US/docs/Web/CSS/margin

0 голосов
/ 26 апреля 2018

Если вы проверите его с помощью Chrome Devtools или аналогичного, вы увидите, что он уведомляет вас о «Неверное значение свойства». Это связано с синтаксической ошибкой. Вы хотите, чтобы ваш CSS был таким

input[type=submit]{
     margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */

Остальное должно быть в порядке

...