码迷,mamicode.com
首页 > 其他好文 > 详细

如何让input之间无空隙

时间:2015-08-25 16:05:59      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

有如下两个input:

<form action="http://www.example.com/index/search" method="get">
    <div>
      <input name="keyword" id="s" value="" size="23" type="text" />
      <input src="/Public/img/search-button.jpg" value="search" type="image" />
    </div>
</form>
css代码:
.search {
    padding-top: 5px;
}
.search input{
    vertical-align: top;
    margin:0;
    border:0;
}
.search #s {
    padding: 0 1px 4px 5px;
    background: url(‘search-bg.jpg‘) left top no-repeat;
    width: 110px;
    height: 28px;
}

 

出现如下图的bug:

技术分享

两个input之让有空隙,不是紧挨着的,而我要的就是将这个空隙去掉,找了很多种方法,以下是我尝试的方法:

  • 使用绝对定位方式
    这种方法虽然能解决空隙问题,但是页面的布局又因为这个搜索框的定位而变乱了。(丢弃)
  • 清除padding和margin
    我将两个input的padding和margin都设为0,但是结果却让我失望,那个空隙还是存在。(丢弃)
  • 将图像搜索按扭的padding值设为负数
    这个结果是请教了群的朋友说的,但是还是解决不了问题,负数只是让图片往左少了,但是不能解决空隙的问题。(丢弃)

经过了这三个尝试无果的情况下,快要临近崩溃的边缘了,最后群里的另一个朋友看到我贴出的代码, 要让两个input之间没有空隙,则要让两个input在同一行,不能使用换行

我最后抱着一线希望再去尝试一下,将上面的html代码改至如下:

<form action="http://www.example.com/index/search" method="get">
    <div>  
        <input name="keyword" id="s" value="" size="23" type="text" /><input src="/Public/img/search-button.jpg" value="search" type="image" />
    </div>
</form>

结果,,,成了!!哈哈哈
 

如何让input之间无空隙

标签:

原文地址:http://www.cnblogs.com/skylor/p/4757490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!