Div定位-将一个放在另一个后面

Question

想象一下一个网页上的数学问题。我想展示这个数学问题，然后让用户在其右侧输入他们的答案。我正在尝试设置结构。我有自定义按钮，我将使用它来更改答案的内部文本。

数学问题由“problemtext”给出，答案由“problemanswer”给出。当用户点击数字键盘时，我会将该数字放在“problemanswer”片段中。

这种设置的问题是答案显示在问题下面。

但我想让答案直接位于问题右侧，而不是下方。此外，我希望答案周围有一个框（或边框）。我该如何做？我的html/css应该是什么样子的？

<div id="problem" class="text" style="display:none">
    <div id="problemoverall" align="center">
        <div id="problemtext" style="font: bold 65px Arial;">
        </div>
        <div id="problemanswer" style="font: bold 65px Arial;">
        </div>
    </div>
</div>

这是我所拥有的相关CSS代码：

.text {
text-align:center;
font-size:16px; 
line-height: 165%;
color:#f1f1f1;
}

.text p {
margin: 8px 0;
}

- CodeGuy

---

inline或inline-block是最佳选择。 - Shomz

Answer 1

使用 display: inline;。添加这个 CSS 规则：

#problemtext, #problemanswer{    
    display: inline;
}

请看这个链接： http://jsfiddle.net/cherniv/dPSav/1/

- Ivan Chernykh