表单在提交时不会移动 [英] Form doesn't move up on submit
本文介绍了表单在提交时不会移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将表格向上移动几个像素，这不起作用。我不知道为什么。
函数在我提交时调用（我用alert（）测试过），但css部分不起作用。
这是代码：
<！DOCTYPE>
< html>
< head>
< title> Pagina de Luis< / title>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< link href ='http：//fonts.googleapis.com/css？family = Source + Sans + Pro'rel ='stylesheet'type ='text / css'>
< link href ='http：//fonts.googleapis.com/css？family = Londrina + Solid'rel ='stylesheet'type ='text / css'>
< link href ='http：//fonts.googleapis.com/css？family = Special + Elite'rel ='stylesheet'type ='text / css'>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script> ;
< script>
$（document）.ready（function（）{
$（＃formulario）。submit（function（event）{
$（this）.css（{
顶部：-50 px;
}）;
}）;
}）;
< / script>
< style type =text / css>
body，
p {
font-family：'Source Sans Pro';
font-size：30px;
line-height：15px;
letter-spacing：0px;
font-weight：bold;
}
#container {
width：100％;
身高：100％;
margin：0px;
padding：0px;
}
#contenido {
width：50％;
min-width：300px;
margin-left：60px;
letter-spacing：-1px;
padding：20px 0 0px 0;
}
#texto {
padding：20px;
margin-top：30px;
}
#texto p {
margin：0px;
padding-bottom：20px;
}
#nombre {
font-family：'特殊精英';
font-size：30px;
padding-top：15px;
border：0px;
}
#imagen {
vertical-align：text-top;
宽度：50％;
float：right;
}
input：focus {
outline：0！important;
}
< / style>
< / head>
< body>
< div id =container>
< div id =contenido>
< form method =POSTid =formulario>
< div id =texto>
< p> Hola，大豆Luis。< / p>
< p> Bienvenido a mi web personal。< / p>
< p> Antes de nada，< / p>
< p>& iquest; podr& iacute;如同标志性的改变？< / p>
< input type =textid =nombreautofocus autocomplete =off/>
< / div>
< / form>
< / div>
< / div>
< / body>
：
解决方案
您正在使用css top $ c> position 属性。尝试使用位置绝对或相对
$（document）.ready（function（）{
$（＃formulario）。submit（function（event）{
$（this）.css（{
top：'-50px'，
position：'relative'
}）;
}）;
}）;
如果您不希望更改位置属性，您可以修改 margin-top 属性，如
$ （document）.ready（function（）{
$（＃formulario）。submit（function（event）{
$（this）.css（{
marginTop：'-50px '
}）;
}）;
}）;
最后，请注意，当表单提交时，页面会重新加载，因此您很可能只会看到此更改暂时。如果你返回false ，页面将不会重新加载（尽管这可能不是你想要的）
$（document）.ready（function（）{
$（＃formulario）。submit（function（event）{
$（this）.css（{ b $ b marginTop：'-50px'
}）;
return false;
}）;
}）;
I'm trying to move the form up a few pixels and this doesn't work. I don't know why.
The function is being called when I submit (I have tested it with an alert()), but the css part doesn't work.
This is the code:
<!DOCTYPE>
<html>
<head>
<title> Pagina de Luis </title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: -50 px;
});
});
});
</script>
<style type="text/css">
body,
p {
font-family: 'Source Sans Pro';
font-size: 30px;
line-height: 15px;
letter-spacing: 0px;
font-weight: bold;
}
#container {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#contenido {
width: 50%;
min-width: 300px;
margin-left: 60px;
letter-spacing: -1px;
padding: 20px 0 0px 0;
}
#texto {
padding: 20px;
margin-top: 30px;
}
#texto p {
margin: 0px;
padding-bottom: 20px;
}
#nombre {
font-family: 'Special Elite';
font-size: 30px;
padding-top: 15px;
border: 0px;
}
#imagen {
vertical-align: text-top;
width: 50%;
float: right;
}
input:focus {
outline: 0 !important;
}
</style>
</head>
<body>
<div id="container">
<div id="contenido">
<form method="POST" id="formulario">
<div id="texto">
<p>Hola, soy Luis.</p>
<p>Bienvenido a mi web personal.</p>
<p>Antes de nada,</p>
<p>¿podrías indicarme tu nombre?</p>
<input type="text" id="nombre" autofocus autocomplete="off" />
</div>
</form>
</div>
</div>
</body>
A live version of the code:
解决方案
You are using css top without any position properties. Try using position absolute or relative
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: '-50px',
position: 'relative'
});
});
});
If you do not wish to change the position property, you can modify the margin-top property like
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
});
});
Finally, note that when a form submits, the page reloads so you will most likely only see this change temporarily. If you return false, the page will not reload(although this may not be what you want)
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
return false;
});
});
这篇关于表单在提交时不会移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
