两个不同html标签之间他们顶部/底部不对齐

最新推荐文章于 2022-05-23 09:01:07 发布
最新推荐文章于 2022-05-23 09:01:07 发布
阅读量787 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/moon_tang/article/details/97618675
本文介绍了解决i标签和input标签在网页布局中垂直对齐问题的方法。通过设置input的vertical-align属性为top，可以确保icon和输入框顶部对齐，避免了因baseline对齐导致的显示不一致。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天用 i 标签 和 input 标签写用户登录，用 i 标签当icon， input输入框，结果遇到两者顶部不对对齐
在这里插入图片描述
于是在网上找了一下，原因是 baseline 的对齐理解，可以自己去网上查 baseline 具体是什么

将input的 vertical-aligin 设为 top就可以解决

input {
	 vertical-align: top;; 
}

在这里插入图片描述

参考博客

https://blog.youkuaiyun.com/weixin_39923616/article/details/79864524

i图标标签元素与span行内元素内容不对齐的解决方法
weixin_41993525的博客
12-27 5085
Dom结构大致是： <a> <i>图标</i> <span>Delete</span> </a> 如上图， 子节点i图标标签有vertical-align:middle属性。 为使得子节点内容都居中，父节点a标签设置如下属性： line-height:2rem; text-align:center; 图标与文字“Delete”没有对齐，文字“Delete”居中了，然而icon图标并未居中。在icon字体图标具有vert.
html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...
weixin_35618539的博客
05-30 2190
我有这个代码HTMLCSS.head {height:110px;position:relative;}.menu {float:left;position:absolute;bottom:0px;}.search {float:right;position:absolute;bottom:0px;}我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"...
html元素自动下对齐,使HTML元素沿底部对齐的两种方法
weixin_29211309的博客
05-30 5646
有时候一行的元素没有对齐，有的高的，有的低了。那么怎么才能让它们处在同一条水平线上呢？可以让它们都沿底部对齐就行了。要解决这个问题可以用CSS或者JS的方法。一、CSS实现一般情况下对于没有浮动的元素。vertical-align: bottom;如果对于有浮动的元素可以设置其line-height为当前行的高度。如下：line-height:50px;二、JS实现$(function () {i...
css:解决因为 display: inline-block； 而没有顶部对齐的问题
A88552211的博客
05-23 1346
上面红圈的为一个 div 包裹的，同一层级。都使用 display: inline-block 进行同行，但是不对齐。 解决方法： 给这两个 div 加上 vertical-align: top 就能顶部对齐了
有i标签<i></i>不能对齐
Coder_KellySha的博客
08-22 2514
<div> <i style="width:12px ;height:24px;display:inline-block;background: red;"></i> <span class="text-sm" style="display:inline-block;margin-left:16px;height:24px;line-h...
span标签和input标签怎么设置在同一行
热门推荐
xinan_xin的博客
03-07 2万+
昨天正好碰到了这个问题，就此记录一下： 分别给span标签和input标签设置float:left，左浮；并且将span和input的height设置成一样，span的line-height也设置和height一样高，有个地方需要注意，input的width不能设置成100%，不然float：left不起作用了。 &lt;span style="float: left; height: 34...
CSS多种方式实现底部对齐的示例代码
09-22
本文将详细介绍两种不同的方法来实现底部对齐，以及它们在特定场景下的应用。这些方法包括使用Flexbox布局和通过设置`padding-top`。 首先，我们来看Flexbox布局的实现。Flexbox是一种现代的CSS布局模式，它允许...
Android TextView两端对齐解决办法
08-30
在 Android 中，TextView 控件不能直接实现两端对齐的效果，因此需要自定义 View 来实现该功能。 在解决方案中，我们可以使用自定义的 WordAlignTextView 类，该类继承自 TextView，并重写了其方法以实现两端对齐的...
Android实现顶部底部双导航界面功能
09-01
在Android应用开发中，创建一个顶部底部双导航界面可以提供用户友好的交互体验，使得用户在不同的功能区域间切换更加方便。本篇文章将详细介绍如何在Android中实现这种设计。 首先，顶部导航通常用于展示应用的主要...
两个span标签上下对齐
07-27
要实现两个 `<span>` 标签的上下...你可以根据需要调整 `vertical-align` 的值来实现不同的对齐效果，例如 `top`（顶部对齐）、`bottom`（底部对齐）等。 希望这可以帮助到你！如果有任何进一步的问题，请随时提问。
表单label与input对齐的方法
齐枫的博客
07-02 1万+
.calculate form input{ width:220px; height:40px; line-height:40px; outline:none; border:none; vertical-align: middle; } .calculate form ul label{ font-size:22px; vertical-align: middle; }
label标签与input标签的对齐问题
C_A_R_的博客
01-31 1万+
在这里使用的是嵌套格式: &amp;lt;label&amp;gt;Text&amp;lt;input/&amp;gt;&amp;lt;/label&amp;gt; 而非通常的for+id的方法: &amp;lt;label for=&quot;input&quot;&amp;gt;Text&amp;lt;/label&amp;gt;&amp;lt;input id=&quot;input&a
html设置顶部对齐,HTML / CSS文本从div顶部对齐
weixin_39860123的博客
05-31 3220
首先，你需要修复你的CSS选择器 .你可以通过这种方式't write all those id' .#content #main #services只需选择1个元素和他的孩子 .例如，如果你测试它，它将适用于你：#services .langelis .txt {width: 440px;height: auto;float: left;border: 1px #000 solid;text-a...
让一个i标签内的伪元素小图标垂直居中对齐
sunchanglan151的博客
03-18 5157
.num .icon[data-v-5e7337c8] { width: 60px; color: aliceblue; line-height: 60px; text-align: center; }
HTML中input标签对齐问题
riCkee的博客
02-20 1万+
今天在练习的时候遇到了一点小问题，稍作记录希望下次遇到可以有点印象。 简单说明一下就是要编写一个搜索框，搜索框分为两块，一块是左边的文本框s_text，一块是右边的搜索按钮s_button，具体的HTML代码如下： <div class="searchbox"> <input class="s_text" type="text" value="hotwords"><...
html 中 div 盒子并排展示
weixin_30781775的博客
11-24 5817
在项目中，遇到一个前端问题，觉得小问题就别去找前端工程师解决了，还是自己动动手吧。 相信不管小问题，大问题 都应该先自己尝试解决，google 、度娘查查资料，这绝对是增加理解和记忆的好机会。 ##问题描述： 　　　　　将两个img图片 并排展示 解决思路如下： 1、先画一个盒子 div ，在页面中规划出展示内容的区域位置(ps：width、height 这两个是必要的)，如果需要水平...
顶部对齐html,顶部对齐在HTML表？
weixin_33451125的博客
06-09 414
我怎样才能获得图像和内容的权利顶部对齐？ 我试过valign =“top”，如你所见。顶部对齐在HTML表？ NFLThe official website for the National Football League. Learn more >> NFL Players Association"We, The National Football League Playe...
前端学习之垂直对齐（vertical-align）
no pains,no gains
05-31 9042
vertical-align 垂直对齐 1.让带有宽度的块级元素水平居中对齐：margin:0 auto; 2.让文字水平居中对齐：text-align:center; 3.让块级元素垂直居中： 子绝父相，子：top:50%;transform: translateY(-50%);/margin-top:-(子高度的一半) 或者使用后面的弹性布局在父元素中添加display: flex;align-items: center; 4.让文字垂直居中： line-height=父元素的高； vertica
如何实现固定高度的ul中，li元素的底部对齐
weixin_40098371的博客
04-26 3429
今天在做项目中（移动端页面 效果图为宽度720px    设置html font-size:72px），突然间被一个小问题困扰了一下下，不知道大家有没有遇到过：ul高度100px li中的背景图片宽高均为12px.li的位置距离ul的下部高度26px.此时要实现图片效果，我采用的办法是利用line-height.设置ul的样式为：{    position: absolute;    z-inde...
td顶部对齐
weixin_33709364的博客
01-05 895
&lt;td width=568 colspan=3 valign="top" style='width:426.1pt;border:none; border-bottom:solid red 1.0pt;padding:0cm 0cm 0cm 0cm;height:53.6pt'&gt; &lt;p &gt;&lt;span style='font-size:12.0pt;font-fa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值