如何让input之间无空隙

有如下两个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>
结果,,,成了!!哈哈哈
时间: 2024-10-12 20:48:22

如何让input之间无空隙的相关文章

解决input之间的空隙

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style type="text/css"> *{ margin:0px; padding:0px; } #a1{

怎么让挨着的两input之间没有空隙?

在写选项卡的时候,用input做点击事件的时候,两个input之间会有空隙,使用margin/padding为0或者为负数依旧如此  → 我脑慢的最后才想到是空格影响的,呵呵呵.

两个盒模型之间的空隙

html文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒模型.盒模型通过四个边界来描述:margin(外边距),border(边框),padding(内边距),content(内容区域),这个大家都知道,那什么是两个盒模型之间的空隙呢?该怎么清除它呢? 假设有一个class为content的父div,里面包含两个子div,这两个子div要同一行显示,我们想要两个子div紧紧连接在一起,所以把它们的margin和padding值全部设为0. 1 <sty

html之给文本框设置宽度和高度/input的无边框效果

<input name="" type="text" style="width:200px; height:20px;" /> html如何设置input的无边框效果 CSS可以控制的<style type="text/css">input {border:1px solid #c00;}input {star : expression(onmouseover=function(){this.style

li标签之间的空隙问题(转)

原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题 IE6/7的Bug:纵向排列的li中加浮动元素产生向下3px的空隙 最近做页面时,经常碰到用 li 标签做纵向列表的时候,会在li的下面产生3px的空隙,之前也碰到过,但都用简单的方法解决了.搜索了一下,网上已经有人给出一些解决方案,但细看之后发现他们的解决方案和找到的原因都有些问题,甚至是错误.要么只单纯地提出问题,解决问题,没有更详细的

span标签之间的空隙

出现的问题: 在html中,当有两个以及两个以上的span标签并列的时候,如果任意两个span之间换行书写的话,那么他们在页面上展现的时候往往会有空隙 解决的办法有两个: 1.将两个span标签写在同一行 2.给span标签添加float

单元格之间的空隙

border-spacing属性允许你控制相邻单元格之间的距离.默认情况下,浏览器经常在每个单元格之间留有一个较小的空隙,如果你想增加或者减小这个空隙可以利用border-spacing属性来控制. <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Tem

div设置为inline-block后,两个div之间有空隙

一. 问题: 如题所描述,div设置为inline-block后,产生如下现象: 二. 解决办法: div之间不要换行不要留空格,写成这种: <div class="parent"> <div class="left">左侧</div><div class="right">右侧</div> </div> 父元素的font-size:0:再给子div设置一个font-size

两个div之间有空隙怎么解决(重置样式)

/* 盒模型中规定了垂直边界重叠,层之间有默认margin值,需要重置css样式 来源网址:http://meyerweb.com/eric/tools/css/reset/ css样式代码如下: */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,