Я пытаюсь заменить элементы div на элементы button, чтобы улучшить доступность, но мне нужно, чтобы кнопки располагались так, как это делали div. (обратите внимание, это нужно только для работы в webkit)
Div принимает ширину родительского контейнера, а кнопка занимает только место, необходимое для отображения его содержимого.
Как я могу это изменить?
Я бы не хотел устанавливать что-то вроде width: 100%, потому что, если вы используете более одной кнопки в контейнере с отображением: webkit-box, divs хорошо размещается, чтобы использовать оставшееся пространство.
Вот небольшой пример :
<!DOCTYPE html>
<html>
<head>
<title>button test</title>
<style>
.mybutton{
display: block;
border: 1px solid red;
-webkit-appearance: none;
-webkit-border-radius: 6px;
background-color: transparent;
-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee));
text-align: center;
}
</style>
</head>
<body>
<div class="mybutton">Div Button</div>
<button class="mybutton">Button</button>
</body>
</html>