最近新发现了一个问题,大部分的标签都可以依靠 margin,padding 使其底部居中, form 表单就是一个特例:单纯的 margin , padding 并不能达到我们想要的效果。
奇怪,发表的代码莫名其妙多了一堆 span 标签 ,复制后一定要删除后在看结果
为此,我也在网上查过一下方法,希望有大神可以解决,但是很无奈,找到的基本都是和我一样的想法:
大多数第一次听到这个问题的人都会说:这个很简单啊,加一个div 盒子,然后让合资底部剧中不就好了,最多就是加一个定位绝对可以了。但是,按照网上贴出来的代码我进行了验证,发现:你们都是骗我的啊。。。。。。
大部分都是光说不做,什么加个盒子,再用个margin,宽度你自己去调呗,唉,说多了心累啊。接下来我贴出我的代码来供大家参考:
第一种方法:基本都是基础样式
定位+tac+上下左右
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#hh{
width: 100%;
position: relative;
}
#wiselyForm {
text-align: center;
position: absolute;
bottom: 0;
left:0;
right:0;
position: fixed;
}
</style>
</head>
<body>
<div id="hh">
<form id="wiselyForm">
<textarea rows="4" cols="60" name="text" id="wbk" ></textarea>
<input type="submit" value="Send out"/>
</form>
</div>
</body>
<html>
第二种方法:flex 布局(想了解更多的可以百度一下,好多老外的布局网站写的都很不错,遍地都是啊。。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#hh {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
text-align: center;
}
#wiselyForm {
flex: 1;
}
</style>
</head>
<body>
和上边的一样,不做重复了。
</body>
<html>
注意:重要部分已在涂上为大家标明,如果你写的是移动端的话最好是加上meta 这句:
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
平常养成一个还习惯最好不过了
差点忘记,效果展示一下:(页面缩放后也没有任何问题呢)