我试图将表单向上移动几个像素，但这不起作用。我不知道为什么。
该函数在我提交时被调用(我已经用 alert() 对其进行了测试)，但 css 部分不起作用。
这是代码:
<!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>
代码的实时版本:
最佳答案
您正在使用没有任何 position 属性的 css top。尝试使用位置 absolute 或 relative
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: '-50px',
position: 'relative'
});
});
});
如果你不想改变position属性，你可以修改margin-top属性
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
});
});
最后，请注意，当提交表单时，页面会重新加载，因此您很可能只会暂时看到此更改。如果您返回 false，页面将不会重新加载(尽管这可能不是您想要的)
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
return false;
});
});
关于javascript - 表单在提交时没有向上移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30424622/