您现在的位置是:首页 > 正文

input 与 inline 标签水平不对齐的解决办法

2024-04-01 01:19:34阅读 4

今天做一个网页,input 与 a 高度一致却遇到了平时认为理所当然水平对齐的事情,居然做不到了。。。。


细心的小伙伴发现了吗?

input 与 变成行级块元素的a标签竟然出现了水平不对齐,于是找度娘问问究竟怎么解决!

方法1:

有的朋友说:input 与图片不对齐,于是为图片增加了 vertical-align: middle;解决了对齐问题;

我试了一下,纳尼?这个方法也许只适合你的情况吧!


 于是我换一种: 给input 设置 vertical-align: top;愉快的解决了。


方法2: 

还可以同时给两个元素设置float属性,同样也可以解决这个问题。


遇到问题的你选择适合自己的方式吧!

关于为什么会出现这个问题,请详阅: http://w3help.org/zh-cn/causes/RD1016   

总结:

解决方案

避免使用 'baseline' 对齐方式,为元素指定 'vertical-align' 值非 'baseline',推荐使用 'vertical-align:bottom' 或 'vertical-align:top'。



网站文章

  • excel表数据挂接到arcgis中

    excel表数据挂接到arcgis中

    不需要在arcmap中新增字段,直接挂接即可 不需要编辑图层 要导入的excel表: 右键选中操作图层 点击连接和关联选择连接: 最终导入:

    2024-04-01 01:19:04
  • 数组左移一位,右移一位,左移k位,右移k位

    void Print_Array(int *br,const int n) //输出打印数组 { for(int i=0;i0); int temp=*(br + n-1); //把数组最后一位元素给t.

    2024-04-01 01:18:57
  • 如何解决 Camtasia9 导入 srt 字幕后出现乱码的问题

    如何解决 Camtasia9 导入 srt 字幕后出现乱码的问题

    最近在用Camtasia9 做视频录制的时候,需要导入第三方的字幕文件(SRT文件),在操作无误的情况下,字幕可以顺利导入软件中,但字幕出现了乱码的现象。 ...

    2024-04-01 01:18:49
  • 端口号占用快速解决方法

    端口号占用快速解决方法

    有的时候我们的电脑中突然软件卡死、然后重启的时候。之前运行的项目在端口没杀死就会被占用掉,无法启动。这个时候我们就需要找出这个端口,并杀死它。

    2024-04-01 01:18:22
  • macos端串口调试推荐 serial直装激活 for mac

    macos端串口调试推荐 serial直装激活 for mac

    Serial识别您连接的设备并按名称和类型列出它们,这样您就不必破译其神秘的BSD / dev路径。更好的是,Serial允许您以对您有意义的方式重命名您的设备。没有更简单的方法可以将Mac直接连接到路由器,防火墙,PBX系统,服务器等。

    2024-04-01 01:18:15
  • Arrays类

    Arrays类

    Arrays类

    2024-04-01 01:18:10
  • 带你领略 Kotlin 中的 “when”魔法

    提到 when,大家都会联想到 Java 中的 switch,然而在 kotlin 中,when 显然比 Java 中的 switch 要强大得多。首先,我们先来看看 when 的特点: 它可以作为表达式使用 使用更加安全 强大灵活的分支结构 可以不带参数 接下来,我来带大家逐步领略这些特点。以下面这段 Java 功能代码为例: switch(animal) { case EAGLE:...

    2024-04-01 01:18:01
  • MySQL进阶——存储引擎

    MySQL进阶——存储引擎

    (5) InnoDB被用在众多需要高性能的大型数据库站点上,InnoDB不创建目录,使用InnoDB时,MySQL将在MySQL数据目录下创建一个名为ibdata1的10MB大小的自动扩展数据文件,以...

    2024-04-01 01:17:36
  • 常用yum源 epel-release

    个人经验:epel 这个是很常用得东西,建议给系统装一下,比如 python3, zabbix 都需要用到 epel ,装epel 很easy,只需要执行下面一条命令即可:yum install -y epel-release...

    2024-04-01 01:17:29
  • java list 和数组区别_java list和数组的区别

    java list 和数组区别_java list和数组的区别

    展开全部List和ArrayList的区别在于:1、在编程语言中ArrayList类是.Net Framework提供的用于数据存储和检索的专用类。List 类可以简单视之为双向62616964757...

    2024-04-01 01:17:22