Question

我正在尝试在一个大div中使用两个div进行一个简单的页面，我将其用作整个页面的容器。为了能够做到这一点，我使用display: inline作为div，但是当我这样做时，一切都会破坏自己。

div {
    margin: auto;
    border: 2px solid black;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
#container {
    width: 95%;
    min-height: 620px;
}
#options, #forms {
    display: inline;
}
h1 {
    text-align: center;
}

<body>
    <div id="container">
        <h1>BANCO DE LA NACION</h1>
        <hr>
        <div id="options">
            <h3>Eliga su operación:</h3>
            <input type="button" name="crear" id="creacion" value="Crear nueva cuenta">
            <input type="button" name="mostrar" id="mostrador" value="Mostrar datos">
        </div>
        <div id="forms">
        </div>
    </div>
</body>

我想知道是否还有另一种方法让divs彼此产生（没有使用bootstrap，目前我试图避免）或者我正在做的方式是纠正一个，这是我的错误？

Answer 1

使用内联块而不是内联。阅读它们之间的区别：

What is the difference between display: inline and display: inline-block?

CSS display: inline vs inline-block

Answer 2

将内联更改为内联块。

为什么不显示：内联并排正确的div？

2 个答案: