导航
关闭

达达说

当前位置:首页 > 网络教程 - 正文

网页制作CSS教程:表单使用float(浮动)去掉控件之间的间隔

  人参与 |更新时间: 2020年02月13日 21:03

每一个网站都应该有一个搜索表单,因为当网站内容太多的时候,依靠导航去翻找内容太困难了,所以翻页太累,不如直接搜索。

现在的搜索表单的样式都几乎是扁平化设计,用图片的很少了。

网页制作CSS教程:表单使用float(浮动)去掉控件之间的间隔

完成普通的表单设计的难点在于如何控制输入框和按钮的高度对齐,以及去掉两个控件之间的间隔。

因为input表单控件默认是inline-block对象,两个inline-block对象并排的时候中间有一个缝隙。如图:

网页制作CSS教程:表单使用float(浮动)去掉控件之间的间隔

如何解决inline-block对象之间的间隔,这篇文章有很详细的说明。

去除inline-block元素间间距的N种方法

不过,我觉得这篇文章没有讲到的float浮动方法很好用。

为输入框和按钮都设置浮动,虽然改变了inline-block的初衷,但是的确可以解决问题。

为了输入框的光标在纵向上居中,最好设置padding值而不是直接为输入框设置高度。而按钮可以直接设置为和输入框一样的高度值。

其实要做好表单的样式是一件很有学问的事情。

百度和淘宝等网站的表单都是用absolute和relative定位来完成的,我们还没有涉及到apDiv的布局,所以,暂且用浮动解决吧。

代码:

<div class="box">

<form id="search" name="search" method="post" action="">

<input type="text" name="keywords" id="keywords1"placeholder="翻页太累,请直接搜索"/> <input type="submit" name="tijiao" value="搜索" id="btn_search1" />

</form></div><div class="box">

<form id="search1" name="search1" method="post" action="">

<input type="text" name="keywords" id="keywords2"placeholder="翻页太累,请直接搜索"/> <input name="tijiao" type="submit" id="btn_search2" value="" />

</form></div>

CSS:

body,div,form,input{

margin:0;

padding:0;}body{

font:16px/1 "microsoft Yahei";

color:#333;}input{

outline:0;}.box{

padding:30px;

}#keywords1,#keywords2{

width:300px;

padding:8px 10px;/*为了光标在纵向上居中,设置padding好过直接设置高度。*/

border:2px solid #ff2832;

border-right:none;

padding-left:10px;

color:#666;

font-size:14px;/*在input里面的文字默认有上下1px的值,所以这里的文字占据的高度是16px*/

float:left;/*浮动可以解决两个控件之间的间隔。*/}#btn_search1,#btn_search2{

width:100px;

height:36px;

background-color:#ff2832;

border:none;

color:#fff;

font-size:20px;

font-weight:bold;

float:left;/*浮动可以解决两个控件之间的间隔。*/

cursor:pointer;/*光标变成手型*/

}#btn_search1:hover{

background-color:#F1584B;}#keywords2{

padding:10px;

}#btn_search2{

width:49px;

height:40px;

padding:0;

border:0;

background:url(images/head_sprite.png) no-repeat 0 -346px;}#btn_search2:hover{

background-position:0 -390px;}

编辑:达达(微信/QQ:57371994)

来源:达达说(微信/QQ:57371994),欢迎分享!

本文链接:https://www.idadashuo.com/jiaocheng/821.html

评论专区

留言与评论(共有 0 条评论)
表情:   
验证码: