<input>和<button>不同高的问题

最新推荐文章于 2024-09-15 22:31:42 发布

weixin_34327223

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量101

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/566896/blog/824950

版权

2019独角兽企业重金招聘Python工程师标准>>>

模仿有道词典首页[dict.youdao.com]搜索框的时候碰到一个问题，加入search button之后会导致input(搜索内容输入框)下沉，经过F12分析实验，发现只要按钮的height到达一定高度，就会导致input下压。

然而，将button设置为float left，高度就平齐了，只不过按钮自己漂到了页面最左边，我就想这样的话，我如果把input也设置为float left就可以解决这个问题了，实验证明，确实如此，但是我还是觉得有更好的解决办法。

最后想起了vertical-align这个属性，将其设置为middle就可以解决了，原因是，button的对齐方式本来并不是middle的，因此导致了混乱。将input和button的vertical-align都设置为middle，搞定。

经过这次尝试我还发现，其实display:inline-block没什么用处，设不设置效果没什么变化

转载于:https://my.oschina.net/u/566896/blog/824950

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34327223

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

input和button 高度不一致问题

weixin_33694172的博客

09-06

605

原因是 input和button的高度计算不一样， input高度不包括border。 button高度包括border。解决方法： 1、box-sizing：border-box； 2、border：0px；用box-shadow模拟border；box-shadow:0px 0px 1px black; 以上要ie8才支持。如果要支持ie6、7、8就需要hack下，input...

解决设置相同高度情况下<input>和<button>不同高

张3疯one

07-26

1939

今天在做一个检索的功能时,做一个搜索框都知道这个功能一个input一个button搞定但是在设置样式的时候发现

参与评论您还未登录，请先登录后发表或查看评论

antd 简单布局和按钮

weixin_66886617的博客

04-04

2527

主思路 Grid栅格控制布局，设定Button按钮

浅谈<button>与<input>

CROOTJAVA的博客

01-09

6188

Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be...

热门推荐

xiao_ju_ju的博客

07-29

1万+

1，我们使用element-ui的单选框radio，点击的时候报错如下图的错，究其原因是访问ibility问题：这个错误可能是因为HTML元素。，这可能违反了无障碍性web的最佳实践，因为屏幕阅读器用户依赖这类元素来理解应用的结构和内容。属性是一个用于指示元素是否对屏幕阅读器等辅助技术隐藏的属性。属性被错误地使用了。

selenium 报错select only works on ＜select＞ elements,not on ＜input＞

qq_39392720的博客

09-06

2609

假下拉框

HTML<button> 标签和<input type="button">的区别

理想三旬

07-15

8653

<button>标签的定义及用法w3school的解释：<button> 标签定义一个按钮。在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。<button> 控件与<input type=”button”> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其

Blocked aria-hidden on a ＜input＞ element because the element that just received focus must not be hi

博客简介

08-14

5640

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will a

<input>和<button>设置同样高度却不能等高

lb752791962的博客

09-10

4362

今天写了一个搜索框，就以简单的为例：<style> *{margin: 0;padding: 0;} div{background-color: #ccc;padding: 50px;} form{width: 200px;position: relative;margin: 0 auto;} input{width: 100px;height: 40

button和input type=button的区别及注意事项

09-28

在JavaScript交互中，`<button>`的`value`属性与`<input type="button">`的处理方式也不同。例如，通过`$('#customBtn').val()`在IE浏览器下获取的是按钮内部的文本，而在非IE浏览器中则是`value`属性的值。如果要跨...

表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

09-01

然而，在使用Bootstrap时，有时会遇到一些意想不到的问题，比如在表单中使用`<label>`与`<input>`配合时，会导致输入框的点击区域扩大。这个问题在移动设备上的表现尤为明显，因为增大了的点击区域可能影响用户体验...

input、button的不同type值在ajax提交表单时导致的陷阱

09-06

但是，如果我们使用<input type="button" value="提交" />，那么情况就不同了。在这种情况下，点击按钮时，表单不会被自动提交，除非我们使用JavaScript来提交表单。现在，让我们来看一个例子。在开发过程中，我们...

关于标签选择器获取table中的＜td＞标签中的html值,以及＜td＞中＜input type=‘text‘＞中的value值的详解

weixin_40517799的博客

05-10

2728

这是我自己最近做的项目的一段jsp代码， <table id="Mytable" class="table table-hover table-bordered table-striped" style="margin-bottom: 0px;"> <tr> <th>序号</th> <th>设备名称</th> <th>设备编号</th> <th>设备类型编号&l

Tcl lnit error: Can’t find a usable init.tcl in the following directories 问题解决

最新发布

梦想闹钟

09-15

231

实际研究后发现，其实py2exe已经把打包需要的lib放在dist文件夹下了，但是打包后的程序运行后却没有去lib下找，而是去找系统自带的环境变量里找，所以找不到。这个问题出现在我用py2exe打包了一个包含tkinter的图形化界面，在当前电脑上运行无问题，在移动到新电脑上后提示报错、getcwd用于获取当前工作目录绝对路径，在设置环境的变量的时候它用的是绝对路径-所以也导致了在当前电脑上能用而移动后不能用。解决方法是在你的程序里重新设置下环境变量，而且是用相对路径的形式。

爆改YOLOv8|使用MobileNetV4替换yolov8的Backbone

weixin_43986124的博客

09-12

981

MobileNetV4，yolov8改进backbone, yolov8改进，即插即用

Python办公自动化案例（二）：对比两个Excel数据内容并标出不同

衍生星球的博客

09-14

308

在数据处理和分析的日常工作中，我们经常需要比较两个Excel文件的差异。这可能是为了验证数据的一致性、检查数据的准确性，或者在版本控制中追踪更改。手动比较这些文件不仅耗时，而且容易出错。幸运的是，Python的openpyxl库提供了一种自动化这一过程的方法。

JUC从实战到源码：中断机制与API实现

qq_43843951的博客

09-12

1125

在Java中，线程中断是一种机制，用于通知线程应该停止当前正在执行的任务。中断通常用于协同线程之间的合作，以便让线程在适当的时候终止其工作，尤其是在长时间运行的任务或阻塞操作中。通过学了多线程以及synchronized的相关知识，接下来就到了学习线程中断知识。

Python——俄罗斯方块

2302_81225694的博客

09-14

718

这段代码使用了Pygame库来实现游戏的图形界面，通过键盘控制方块的移动和旋转。游戏循环不断更新方块的位置和网格状态，并绘制在屏幕上。在方块达到底部或无法继续移动时，判断是否有满行，并清除满行的方块。游戏会根据方块的状态和移动情况不断更新，直到无法继续下落为止，游戏结束。俄罗斯方块游戏是一款经典的益智游戏，通常使用编程语言Python来实现。请注意，这只是一个简单的示例，可能还有一些功能和优化方面的改进。您可以根据自己的需求进行修改和扩展。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码

05-27

这段代码有一些问题，我来逐个指出并提供改进的方案： 1. 没有为表单元素设置name属性，导致表单提交时无法获取表单数据。... <input id="btn" type="button" value="提交"> </form> </body> </html> ```