css - div定位——一个接一个的放

Question

想象一下网络上的一道数学题。我想显示数学问题，然后让用户能够在其右侧输入他们的答案。我正在尝试建立结构。我有自定义按钮，可用于更改答案的内部文本。

数学问题由"problemtext"给出，答案由"problemananswer"给出。当用户点击数字键盘时，我会将该数字放入 "problemananswer" 部分。

此设置的问题在于答案显示在问题下方。

但我希望答案直接在问题的右侧，不在其下方。 此外，我希望答案周围有一个框(或边框)。我该怎么做？我的 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;
}

Answer 1

使用显示:内联；。添加此 CSS 规则:

#problemtext, #problemanswer{    
    display: inline;
}

看看: http://jsfiddle.net/cherniv/dPSav/1/