Question

我正在尝试使用JQuery Steps创建一个向导，我在垂直选项卡旁边排列的表单区域出现问题。我创建了一个简化的例子来演示我得到的东西。

这就是我得到的。身体应该是标签的右边......不在它下面......

我创建了一个这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steps Test</title>
<link type="text/css" href="/js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet" /> 
<link type="text/css" href="/js/jquery-ui-1.11.4/jquery-ui.theme.css" rel="stylesheet" />   
<script type="text/javascript" src="/js/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/components/steps/steps.css" type="text/css">

<script type="text/javascript" src="/components/steps/jquery.steps.js">    </script>
<script>
$(document).ready(function() {

var form = $("#application-form");

form.steps({
    headerTag: "h3",
    bodyTag: "section",
    stepsOrientation: "vertical",
    onStepChanging: function (event, currentIndex, newIndex)
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onFinishing: function (event, currentIndex)
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
    $('#message').hide(0);

    event.preventDefault();
    return false;        }
});


});

</script>
</head>

<body>
<form id="application-form" class='form2' >


<h3>Your personal information</h3>
<section>
</section>

<h3>School Info</h3>
<section>
</section>

<h3>Professional Licensure</h3>
<section>
</section>

<h3>Expected Professional Employment</h3>
<section>
</section>
<h3>Important Questons</h3>
<section>
</section>
</form>

</body>

``

Answer 1

我的解决方案就是这样。在steps.css中，我轻描淡写：在本节中都清楚：在垂直部分中。

null

JQuery将垂直制表符与主体对齐

1 个答案: