Input搜索框与搜索图标对齐解决方法

出现的情况

有些网站需要在搜索框旁写一个紧挨着的放大镜图标框。这时候可能就牵涉到对齐问题。

例如小米商城搜索框:

 可以简单写一下这两个框:

        <div class="header-search"><input class="first" type="text" placeholder="冰箱"><a href="#javascript:;"><input class="last iconfont" type="submit" value="&#xe609;"><!-- &#xe609是已经引入了图标字体 --></a></div>

 简单写下样式:

    .header-search{width: 296px;height: 50px;}.header-search>.first{width: 217px;height: 50px;}.header-search>a>.last{width: 52px;height: 50px;/* 如果需要扩大放大镜图标 */font-size: 24px;} 

不放大图标时:

放大图标时: 

可以看到使用font-size:属性放大图标,第二个input框会出现偏移无法对齐的情况。

解决方法 一:

给放大镜的input添加vertical-align: middle;属性。

    .header-search>a>.last{width: 52px;height: 50px;font-size: 24px;/* 如果需要扩大放大镜图标 */vertical-align: middle;} 

 此时两个框中间的三像素问题,可以通过给外层div盒子font-size:0;等方式来解决。

    .header-search{width: 296px;height: 50px;float: right;font-size: 0; }

 边框重合可以通过取消任意一边重合的边框即可。

例:

    .header-search>a>.last{width: 52px;height: 50px;font-size: 24px;/* 如果需要扩大放大镜图标 */border-left: none;/* 取消左侧边框 */} 

        如果采用了方法一,出现了input框内文字不显示的问题,可能是fon-size:0;属性继承的问题。需要给其单独设置font-size

解决方法 二:

可以使用绝对定位来解决

给外层div添加相对定位:

 .header-search{width: 296px;height: 50px;position: relative;}

给两个input添加绝对定位,其中放大镜图标框使用添加right:0;

    .header-search>.first{width: 217px;height: 48px;position: absolute;}.header-search>a>.last{width: 52px;height: 50px;font-size: 24px;/* 如果需要扩大放大镜图标 */position: absolute;right: 0;/* 让放大镜框靠右 */} 

对于可能出现的间隙或者重叠问题:

 

  1. 可以选择通过调整外层div的宽度解决:

  .header-search{width: 270px;/* 可以直接计算两个框的宽度及边框相加,减去重合的一边边框 */height: 50px;position: relative;}

 2. 可以通过调整两个input框的相对定位来始两者贴合。

    .header-search>.frame{width: 217px;height: 48px;position: absolute;left: 26px;}

 注意:以上演示均设置了1px边框。

        如果采用了方法一,出现了input框内文字不显示的问题,可能是fon-size:0;属性继承的问题。需要给其单独设置font-size

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/41908.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全力备战,迎接客户联络深度智能化的“质变时刻”

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 自2022年6月30日在香港联交所主板上市以来&#xff0c;天润融通不断加大在AI方面的研发投入&#xff0c;并确立了以“AI原生”思维重构客户联络系统和流程的产品发展目标。过去的一年中&#xff0c;天润融通推出了多项创新的…

重磅发布!百分点科技正式发布数据科学基础平台DeepMatrix

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 3月30日&#xff0c;由百分点科技主办的“2023数据科学峰会”在北京金隅智造工场科技秀场成功召开。此次大会以“数据进阶”为主题&#xff0c;邀请权威专家学者以科学视角和全球视野解读数据科学、数字政府建设及数字化业务…

2022全球社交电商趋势策略报告

导读&#xff1a; 《报告》显示,后疫情时代,口碑营销和熟人种草已成为社交购物的主要趋势;消费者对购物体验要求提升,AR(增强现实)技术将颠覆传统购物体验。店匠科技与 Snapchat 将基于此趋势,围绕独立站 SaaS、社交电商营销一站式解决方案,助力品牌企业探索建立合适的社交电商…

AI首次挑战DevOps全流程 - AI加持的黑马冠军团队有多厉害?丨IDCF

一. 报名初衷 IDCF 黑客马拉松活动第40场活动&#xff0c;加入了AI元素以后&#xff0c;各个环节明显提效&#xff0c;输出质量更高。IDCF的AI黑马挑战赛&#xff0c;一个汇集了众多DevOps爱好者、开发者的平台&#xff0c;希望能在这个沙龙中探求前沿技术、广交志同道合的朋友…

chatgpt赋能python:Python实现输入法-让你的输入更方便

Python实现输入法-让你的输入更方便 介绍 输入法是我们日常使用电脑必不可少的工具之一&#xff0c;能够帮助我们更快捷、便利地输入文字。而Python作为目前非常流行的编程语言之一&#xff0c;也可以实现输入法的功能。 Python实现输入法可以带来很多好处&#xff0c;比如&…

基于GPT搭建私有知识库聊天机器人(六)仿chatGPT打字机效果

文章链接&#xff1a; 基于GPT搭建私有知识库聊天机器人&#xff08;一&#xff09;实现原理 基于GPT搭建私有知识库聊天机器人&#xff08;二&#xff09;环境安装 基于GPT搭建私有知识库聊天机器人&#xff08;三&#xff09;向量数据训练 基于GPT搭建私有知识库聊天机器…

Js 如何实现一个类似 chatGPT 打字机效果

在使用chatGPT的时候,会有一个打字机的效果,以下是分别使用原生Js和Vue实现 原生 JS 实现 如下是示例代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>Printer 打字机效果</title><style>* {margin: 0;bor…

自然语言大模型介绍

1 简介 最近一直被大语言模型刷屏。本文是周末技术分享会的提纲&#xff0c;总结了一些自然语言模型相关的重要技术&#xff0c;以及各个主流公司的研究方向和进展&#xff0c;和大家共同学习。 2 Transformer 目前的大模型基本都是Transformer及其变种。本部分将介绍Transf…

chatgpt赋能python:Python中怎么打开图片

Python中怎么打开图片 在Python中&#xff0c;打开并处理图片是常见的任务。本文将介绍如何使用Python打开和显示图像文件&#xff0c;以及一些其他关于处理图像的有用技巧。 打开图片 Python提供了许多库来处理图片。其中最流行的是Pillow和OpenCV&#xff0c;但是还有其他…

chatgpt赋能python:使用Python修改照片属性:让你的照片更美丽

使用Python修改照片属性&#xff1a;让你的照片更美丽 介绍 随着数字摄影的发展&#xff0c;人们不再满足于只是拍照&#xff0c;更追求照片的美感和创意。虽然相机和手机等设备都已经默认提供了各种滤镜和编辑功能&#xff0c;但有时它们并不能满足我们的要求。那么&#xf…

独家 | Scikit-LLM:Sklearn邂逅大语言模型

作者&#xff1a;Fareed Khan翻译&#xff1a;陈之炎 校对&#xff1a;赵茹萱本文约2600字&#xff0c;建议阅读8分钟 本文为您介绍文本分析的工具包Scikit-LLM。 标签&#xff1a;LLM Scikit-LLM是文本分析的游戏规则改变者&#xff0c;它将功能强大的ChatGPT语言模型和scikit…

LLM应用的技术栈与设计模式详解

大型语言模型是构建软件的强大新原语。 但由于它们是如此新&#xff0c;并且其行为与普通计算资源如此不同&#xff0c;因此如何使用它们并不总是显而易见的。 在这篇文章中&#xff0c;我们将分享新兴 LLM 应用程序的参考架构。 它展示了我们所见过的人工智能初创公司和先进科…

GPT模型微调教程:打造您专属的ChatGPT模型

一、前言 通过前面对大语言模型的介绍&#xff0c;我们了解到&#xff0c;其实像目前已经发布的一些主流大语言模型如OpenAI公司发布的的GPT-3.5、GPT-4、Google发布的Bard和PaLM 2多模态模型、Anthropic最近推出的Claude 2、亦或是国内清华大学联合智普AI发布的ChatGLM 2等都…

[AI医学] ChatDoctor:借助医学知识库生成微调样本构建医疗领域大模型

关键词&#xff1a;AI医疗&#xff0c;医疗大模型&#xff0c;chatdoctor&#xff0c;大模型finetuning&#xff0c;基于疾病知识库的数据生成 ChatDoctor 在LLaMA模型的基础上进行fine tuning训练&#xff0c;样本数据采用100k在线真实医患对话&#xff0c;同时加入自主知识…

LLM/ChatGPT与多模态必读论文150篇(已更至第100篇)

目录 前言 第一部分 OpenAI/Google的基础语言大模型(11篇&#xff0c;总11篇) 第二部分 LLM的关键技术&#xff1a;ICL/CoT/RLHF/词嵌入/位置编码/加速/与KG结合等(34篇&#xff0c;总45篇) 第三部分 Meta等公司发布的类ChatGPT开源模型和各种微调(7篇&#xff0c;总52篇) …

讲课大师 把微信消息同步转发到企业微信中

讲课大师现在可以把微信中的语音、文字、图片等消息&#xff0c;转播到企业微信中了。开发这个功能&#xff0c;花了快三周的时间&#xff0c;主要是各种事情把我弄得太苦逼&#xff0c;让我无法集中精力&#xff0c;感谢上海杜总红包的鼓励&#xff0c;现在终于可以发布第一个…

好文转载 【ChatGPT】ChatGPT+MindShow三分钟生成PPT

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 第一步&#xff1a;获取PPT内容大概&#xff1a; 1.打开ChatGPT镜像 2.向他提问&#xff0c;提问格式如下&#xff0c;主题替换成你想获得的信息。比如某本书的拆解&#xff0c;自媒…

全面上新!阿里 2023 版(Java 岗)面试突击手册,Github 已标星 37K

程序员面试背八股&#xff0c;几乎已经是互联网不可逆的一个形式了。自从面试**八股文火了之后&#xff0c;网上出现了不少 Java 相关的面试题&#xff0c;很多朋友盲目收集背诵&#xff0c;**但网上大部分的面试题&#xff0c;大多存在这几个问题&#xff1a;第一&#xff0c;…

来阿里一年后我迎来了第一次工作变动....

你怎么不更新啦&#xff1f;怎么最近动态也变少啦&#xff1f;都去干吗了&#xff1f;工作很忙么&#xff1f; 算起来我也阶段性停更一年半了&#xff0c;这一年半不仅是在不断尝试自媒体不同的内容和方向&#xff0c;工作上的巨大转变也推着我去学习尝试了很多全新的东西。 …

阿里P8新年自爆内部使用的十万字面试手册

这份面试手册本来是我们部门面试时自用的【大厂的员工很辛苦的&#xff0c;不仅要敲代码还要去帮忙内推和面试】&#xff0c;可后来越来越多的朋友找到我&#xff0c;让我帮他们给一些面试的资料和面试上的指引&#xff0c;而且这些关系也不太好拒绝&#xff0c;我本就不是那种…