2

我尝试在干净的页面中运行基本示例。默认情况下，我的内容框位于右侧而不是步骤按钮下方：

截屏

这是代码：

<html>
<head>
  <title>Demo</title>
  <script src="Scripts/jquery-1.10.2.js"></script>
  <script src="Scripts/jquery.steps.js"></script>
  <link href="Content/jquery.steps.css" rel="stylesheet" />
</head>
<body>
  <div id="wizard">
    <h1>First Step</h1>
    <div>First Content</div>

   <h1>Second Step</h1>
   <div>Second Content</div>
  </div>

    <script>
      $("#wizard").steps();
  </script>
</body>
</html>

在外部内容 div 上设置了一个溢出，但是当我遇到一个非常简单的向导时，我很犹豫是否要深入研究这个问题。我希望文档中缺少一个必需的容器。

4

1 回答 1

2

我想到了。该代码正在应用 clearfix 类，但作者希望您提供自己的或忽略将其包含在 css 中。我最终从他在 github 中的演示“main.css”中取出了它：

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

https://raw.githubusercontent.com/rstaib/jquery-steps/master/demo/css/main.css

于 2015-07-31T19:30:10.137 回答