我正在尝试使用包含嵌入式文本框的代码示例来格式化基于 Web 的测验页面。我希望文本框在右侧，远离代码。当前结果如下所示：
代码如下。文本框是用户应该输入答案的地方，但我希望它们向右移动。我最初尝试使用两个 div 框来执行此操作，但这有其自身的问题，甚至更糟。这样，保证文本框与代码在同一行。
我尝试了跨度，使用 css 设置大宽度，或者设置左边缘。好吧，我错了，它不起作用。
第一个问题是如何实现这一目标。第二个是为了看看出了什么问题，我将 span 的背景颜色设置为丑陋的东西。如您所见，css 中跨度的颜色似乎一直延续到下一行。这是一个错误吗？Firefox 和 IE10 中的行为相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weird Div Placement Problem</title>
<link rel="stylesheet" type="text/css" href="styles3.css" media="all"/>
</head>
<body>
<div class="bg">
<div class="content">
<div class="bounds">
<div class="question">
<a name="q10"/><span class="number">10.</span>
Please fill in the values indicating what will be computed by the program.
</div>
<div class="code">
void loop() {
<br/> int a = 1;
<br/> int b = 2;
<br/> int c = a+b; <span class="rc"/> //c = <input type="text" name="a10c" size="10"/>
<br/> int d = c / 3; <span class="rc"/> //d = <input type="text" name="a10d" size="10"/>
<br/> int e = 7 / 2; <span class="rc"/> //e = <input type="text" name="a10e" size="10"/>
<br/>}
</div>
</div>
</div>
</form>
</div>
</body>
</html>
这是CSS：
div {
padding: 10px;
margin: 10px;
}
div.bg {
background-color: #4040A0;
width: 800px;
border-radius: 10px;
}
div.code {
width: 55%;
spacing: 0px;
background-color: red;
color: black;
font: normal 16pt Verdana, fixed;
}
span.rc {
left: 400px;
background-color: #d00040;
}
div.bounds {
background-color: #202090;
color: white;
border: 1px solid black;
border-radius: 10px;
font: normal 15pt/18pt Arial;
}
.number {
font: bold 24pt Arial;
margin: 10px;
}
text{
font: normal 14pt verdana;
}
好的，所以 FakeRainBrigand 建议我使用 clear: both 和 float: right。我相信我按照您的要求做了，但我会重新发布代码。这类似于之前使用两个 div 框发生的情况。有一些非常糟糕的行为。基本上这两个 div 框不会保持在同一行，即使它们看起来应该如此。这是图像（在 Firefox 上相同，但这是 IE10）。
新的CSS是：
div {
padding: 10px;
margin: 10px;
}
div.bg {
background-color: #4040A0;
width: 800px;
border-radius: 10px;
}
div.code {
width: 55%;
spacing: 0px;
background-color: red;
color: black;
font: normal 16pt Verdana, fixed;
}
div.q {
clear: both;
display: block;
font: normal 12pt Verdana, fixed;
}
/*
div.rc {
float: right;
display: block;
}
span.rc {
left: 400px;
background-color: #d00040;
}*/
div.bounds {
background-color: #202090;
color: white;
border: 1px solid black;
border-radius: 10px;
font: normal 15pt/18pt Arial;
}
.number {
font: bold 24pt Arial;
margin: 10px;
}
text{
font: normal 14pt verdana;
}
html是：
奇怪的 Div 放置问题 10. 请填写指示程序将计算什么的值。
无效循环（） { int a = 1; 诠释 b = 2; 诠释 c = a+b; //c = int d = c / 3; //d = int e = 7 / 2; //e = } </div>
