• 如何让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之间的空隙

    两个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>

    结果,,,成了!!哈哈哈
     
  • 相关阅读:
    国内各地图API坐标系统比较与转换
    ubuntu下安装程序的三种方法
    使用微信公众平台测试账号开发“网页授权获取用户基本信息”功能
    centos中crontab(计时器)用法详解
    vb随机移动鼠标
    js中对函数设置默认参数值的3种方法
    Ubuntu 16.04安装配置VSFTPD(支持TLS/SSL加密)
    Spark scheduler
    Spark shuffle
    Spark存储体系
  • 原文地址:https://www.cnblogs.com/skylor/p/4757490.html
Copyright © 2020-2023  润新知