0

我正在尝试使用包含嵌入式文本框的代码示例来格式化基于 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>

4

3 回答 3

1

使用float正确的 HTML，您可以将评论推送到框的右侧。

演示

结果示例

<form class="code">
    <div>void loop() {</div>
    <div>int a = 1;</div>
    <div>>int b = 2;</div>
    <div class="q">int c = a+b;<span class="rc" />//c =
        <input type="text" name="a10c" size="10" />
    </div>
    <div class="q">int d = c / 3;<span class="rc" />//d =
        <input type="text" name="a10d" size="10" />
    </div>
    <div class="q">int e = 7 / 2;<span class="rc" />//e =
        <input type="text" name="a10e" size="10" />
    </div>
    <br/>}
</form>

除了你当前的 CSS，使用这个：

.q { clear: both; }
.q .rc { float: right; display: block; }
于 2013-06-08T21:53:36.757 回答
0

这个怎么样

http://jsfiddle.net/vVM2C/

HTML

   <!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 style="margin: 0 0 0 3.4em;" class="rc"/> //c = <input  type="text" name="a10c" size="10"/>
<br/>  int d = c / 3; <span style="margin: 0 0 0 3em;" class="rc"/> //d = <input  type="text" name="a10d" size="10"/>
<br/>  int e = 7 / 2; <span style="margin: 0 0 0 2.9em;" 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 {
    margin: 0;
    padding: 0;
    width: 100%;
    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;
}
于 2013-06-08T21:47:03.073 回答
0

向右浮动最终将是一个解决方案：

  input {
    float: right;
  }

但这目前不起作用，因为文本都是一个块，BR标签被用来将它们放在不同的行上。您需要将每一行放在它自己的容器中，即 DIV 或 P（段落）。

顺便说一句，您有一个不必要的关闭 FORM 标记，应该将其删除。

于 2013-06-08T21:48:50.223 回答