html - 宽度为 50% 的 HTML/CSS 响应式按钮

Question

任何人都可以帮助我尝试创建一个自定义导航，无论屏幕大小如何，它都会并排显示 2 个按钮，我使用这个 css 代码：

display: inline-block;
width: 50%;
padding: 10px;

但是每次我使用它时，其他按钮似乎都会换行。

我希望它看起来像

不管屏幕尺寸是多少。2 个并排的按钮，每个按钮将占据屏幕的一半。

标签： htmlcss

Answer 1

div {
    font-size: 0;
}
button {
    font-size: 1rem;
    display: inline-block;
    width: calc(50% - 20px);
    padding: 10px;
    margin: 10px;
}

<div>
    <button>button1</button>
    <button>button2</button>
</div>

或者

div {
    display: flex;
}
button {
    flex-grow: 1;
    margin: 10px;
    width: 50%;
    padding: 10px;
}

<div>
    <button>button1</button>
    <button>button2</button>
</div>