Html 在div中，相同类型的内联元素的间距相等的一般方法是什么？

我有

---

我希望这3个表单元素在包装它们的div中间隔相等。这3个表单元素的大小是恒定的，相对于div来说很小，因此我想保留一个通用的CSS大纲，以防将来需要添加另一个表单元素。我不想给3个元素中的每一个单独的ID，然后如果不需要的话，适当地浮动它们。

您可以在父div上使用

display:flex

，在表单元素上使用

flex:1

来拉伸表单元素以覆盖页面的整个宽度

---

不幸的是，较旧的浏览器不支持这一点

尝试对容器使用

display:table

，对表单元素使用

table row

和

table cell

元素。

是否可以对父元素使用

display:flex

？

<div class="outerdiv" id="navbar">
    <form action="page1.html"><input type="submit" value="Page 1"></form>
    <form action="page2.html"><input type="submit" value="Page 2"></form>
    <form action="page3.html"><input type="submit" value="Page 3"></form>
</div>

.outerdiv {
    display: flex;
    flex-direction: horisontal;
    border: solid 3px #900;
}

.outerdiv form {
    text-align: center;
    flex: 1;
    border: solid 1px #000;
}