Question

我创建了一个包含Div的灯箱链接。 Div元素内部有一个表单，但div不会扩展到页面正文的100％。有谁知道为什么？

以下是代码：

CSS：

<!DOCTYPE html>
<html>
<head>

  <style>
  @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

  body {
  background-color: #C13E18;
  width: 750px;
  overflow:scroll;
    overflow-x:hidden;
  }

.form {
width: 100%;
float: left;

}

</style>
</head>

HTML：

<body>
<div id=bookingpage>

<div id="form"> <object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui</div>" style="overflow:auto;">
    </object></div></div>
</body>
</html>

Answer 1

您将该样式应用于名为＆＃34; form＆＃34;的类。

您的实际div没有具有表格ID的类。哈希标记是ID选择器。

当前

.form { width: 100%; float: left; }

应

#form { width: 100%; float: left; }

您可能还必须为对象指定100％宽度：

#form, #form object{ width: 100%; float: left; }

Answer 2

#form {
width: 100%;
float: left;

}

在css上，任何以dot开头的项都是class，以＃为id开头。

Answer 3

您的正文脚本不正确。

<!DOCTYPE html>
<html>
<head>

  <style>
  @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

  body {
  background-color: #C13E18;
  width: 750px;
  overflow:scroll;
    overflow-x:hidden;
  }

#form {
width: 100%;
float: left;

}

</style>
</head>
  <body>
    <div id=bookingpage>
      <div id="form"> 
        <object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui" style="overflow:auto;">
        </object>
      </div>
    </div>
  </body>
</html>

您将结束div放在数据网址中。

包含表单的Div不占用整个页面

3 个答案: