Html Div定位——一个接一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18687412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div positioning - putting one after another
提问by CodeGuy
Imagine a math problem on the web. I would like to display the math problem and then have the user be able to type their answer to the right of it. I am trying to set up the structure. I have custom buttons that I will use to change the inner text of the answer.
想象一下网络上的一个数学问题。我想显示数学问题，然后让用户能够在它的右侧输入他们的答案。我正在尝试建立结构。我有自定义按钮，可用于更改答案的内部文本。
The math problem is given by "problemtext"and the answer is given by "problemanswer". When the user taps on the number pad, I will place that number in the "problemanswer"segment.
数学题由 给出，"problemtext"答案由 给出"problemanswer"。当用户点击数字键盘时，我会将该数字放入该"problemanswer"段中。
The problem with this set up is that the answer is showing up below the problem.
此设置的问题在于答案显示在问题下方。
But I want the answer to be directly to the right of the problem, not below it. Further, I'd like the answer to have a box (or border) around it.How can I do this? What should my html/css look like?
但我希望答案直接在问题的右侧，而不是在问题下方。此外，我希望答案周围有一个框（或边框）。我怎样才能做到这一点？我的 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>
Here's some relevant CSS I have
这是我拥有的一些相关 CSS
.text {
text-align:center;
font-size:16px;
line-height: 165%;
color:#f1f1f1;
}
.text p {
margin: 8px 0;
}
回答by Cherniv
Use display: inline;. Add this css rule:
使用display: inline;. 添加此 css 规则：
#problemtext, #problemanswer{
display: inline;
}
Have a look: http://jsfiddle.net/cherniv/dPSav/1/
