你能告诉我为什么我的登记表不起作用吗？是因为css吗？当我单独使用注册表格代码时，它运行良好。但当我把代码和导航栏结合在一起时，不知怎么的，除了密码框，我无法填写其他框。
new.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylenew.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options)
{ var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function()
{ base.options = $.extend(
{}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css(
{ 'right': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "")
{ base.$label.hide(); base.showing = false; }; base.$field.focus(function()
{ base.fadeOnFocus(); }).blur(function()
{ base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e)
{ base.hideOnChange(e); }).change(function(e)
{ base.checkForEmpty(); }).bind('onPropertyChange', function()
{ base.checkForEmpty(); }); }; base.fadeOnFocus = function()
{ if (base.showing)
{ base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity)
{ base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur)
{ if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else
{ base.setOpacity(0.0); }; }; base.prepForShow = function(e)
{ if (!base.showing)
{ base.$label.css(
{ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e)
{ base.hideOnChange(e); }); }; }; base.hideOnChange = function(e)
{ if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing)
{ base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions =
{ fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options)
{ return this.each(function()
{ var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
$("#RegisterUserForm label").inFieldLabels();
});
</script>
<div id="wrapper1">
<div id="registration">
<h2>Create New Account</h2>
<form id="RegisterUserForm" action="" method="post">
<fieldset>
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" class="text" value="" />
</p>
<p>
<label for="tel">Phone Number</label>
<input id="tel" name="tel" type="tel" class="text" value="" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" class="text" value="" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" class="text" type="password" />
</p>
<p>
<button id="registerNew" type="submit">Register</button>
</p>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options)
{ var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function()
{ base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css(
{ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function()
{ base.fadeOnFocus(); }).blur(function()
{ base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e)
{ base.hideOnChange(e); }).change(function(e)
{ base.checkForEmpty(); }).bind('onPropertyChange', function()
{ base.checkForEmpty(); }); }; base.fadeOnFocus = function()
{ if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity)
{ base.$label.stop().animate(
{ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur)
{ if (base.$field.val() == "")
{ base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else
{ base.setOpacity(0.0); }; }; base.prepForShow = function(e)
{ if (!base.showing)
{ base.$label.css(
{ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e)
{ base.hideOnChange(e); }); }; }; base.hideOnChange = function(e)
{ if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing)
{ base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions =
{ fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options)
{ return this.each(function()
{ var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
$("#RegisterUserForm label").inFieldLabels();
});
</script>
和css，stylenew.css
#wrapper1{
display: inline-block;
}
body{
margin: 0;
float: left;
}
h1, form, fieldset, input{
margin: 0;
padding: 0;
border: none;
}
body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }
#registration {
color: #fff;
background: #2d2d2d;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(60,60,60)),color-stop(0.74, rgb(43,43,43)),color-stop(1, rgb(60,60,60)));
background: -moz-linear-gradient(center bottom,rgb(60,60,60) 0%,rgb(43,43,43) 74%,rgb(60,60,60) 100%);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 10px;
width: 430px;
}
#registration a{
color: #8c910b;
text-shadow: 0px -1px 0px #000;
}
#registration fieldset {
padding: 15px;
}
input{
margin: 7px;
}
input.text {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border:solid 1px #444;
font-size: 14px;
width: 90%;
padding: 7px 8px 7px 30px;
-moz-box-shadow: 0px 1px 0px #777;
-webkit-box-shadow: 0px 1px 0px #777;
background: no-repeat 4px 5px, -moz-linear-gradient(center bottom,rgb(225,225,225) 0%,rgb(215,215,215) 54%,rgb(173,173,173) 100%);
background: no-repeat 4px 5px, -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(225,225,225)),color-stop(0.54, rgb(215,215,215)),color-stop(1, rgb(173,173,173)));
color:#333;
text-shadow:0px 1px 0px #FFF;
}
input#email {
background-position: 4px 5px;
background-position: 4px 5px, 0px 0px;
}
input#password {
background-position: 4px -20px;
background-position: 4px -20px, 0px 0px;
}
input#name {
background-position: 4px -46px;
background-position: 4px -46px, 0px 0px;
}
input#tel {
background-position: 4px -76px;
background-position: 4px -76px, 0px 0px;
}
#registration h2 {
color: #fff;
text-shadow: 0px -1px 0px #000;
border-bottom: solid #181818 1px;
-moz-box-shadow: 0px 1px 0px #3a3a3a;
text-align: center;
padding: 18px;
margin: 0px;
font-weight: normal;
font-size: 24px;
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
}
#registerNew {
margin: 10px;
width: 100px;
height: 30px;
border: solid 2px;
cursor: pointer;
float: right;
}
#registerNew:hover { background-position: 0px -41px; }
#registerNew:active { background-position: 0px -82px; }
#registration p {
position: relative;
}
fieldset label.infield /* .infield label added by JS */ {
color: #333;
text-shadow: 0px 1px 0px #fff;
position: absolute;
text-align: left;
top: 3px !important;
left: 35px !important;
line-height: 29px;
}
此外，当我将表单调整为..(比如float:right,)时，导航栏也会向右移动。利润率也会被打乱。我怎样才能把这两件事分开？知道吗？
问题是您在表单中使用了<p>。请尝试将<p>替换为<br/>。以下是一个示例：http://jsfiddle.net/dC5dw/1/
因此：
<fieldset>
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" class="text" value="" />
</p>
<p>
<label for="tel">Phone Number</label>
<input id="tel" name="tel" type="tel" class="text" value="" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" class="text" value="" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" class="text" type="password" />
</p>
<p>
<button id="registerNew" type="submit">Register</button>
</p>
</fieldset>
它一定像这个
<fieldset>
<label for="name">Name</label>
<input id="name" name="name" type="text" class="text" value="" />
<br/>
<label for="tel">Phone Number</label>
<input id="tel" name="tel" type="tel" class="text" value="" />
<br/>
<label for="email">Email</label>
<input id="email" name="email" type="email" class="text" value="" />
<br/>
<label for="password">Password</label>
<input id="password" name="password" class="text" type="password" />
<br/>
<button id="registerNew" type="submit">Register</button>
</fieldset>
原因是<p>导致每个输入都与上面的输入重叠。所以这就是为什么密码工作得很好，因为下面没有重叠