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 に答える