如何制作< span>与< input type =" text">相同的高度> [英] How to make <span> the same height as <input type="text">

查看:108
本文介绍了如何制作< span>与< input type =" text">相同的高度>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在元素的左侧放置一个元素,但是我似乎无法使它们的高度相同并彼此对齐。跨度似乎总是定位更高一点。



任何人有任何想法?



闪耀*



编辑:HTML部分

 < label for =name>用户名:< / label> 
< input type =textname =nameid =namevalue =maxlength =15/>
< span id =boxstyle =display:none>< / span>

CSS

  span.box {
position:absolute;
width:100px;
margin-left:20px;
border:1px;
padding:2px;
height:16px;
}

input.name {
width:115px;
height:14px;


解决方案

如果你想垂直对齐项目在同一行中,您可能不需要使它们的高度相同 - 只需为 vertical-align 赋予相同的值即可。

  .myinput,.myspan {
vertical-align:middle;
}

很多人不理解垂直对齐的是,为了让东西垂直对齐到中间,该行中的所有内容都必须具有中间的垂直对齐属性 - 不只是一件事(如跨度)。

假设一条不可见的水平线贯穿任何内联内容。通常,文本的底线和图像的底部与此线对齐。但是,如果将垂直对齐更改为中间,则元素的中间(文本范围,图像等)与此行对齐。然而,如果他们仍然将他们的底线或底线对齐到那条线上,那么它不会与其他项目垂直排列 - 他们需要将它们的中间对准该线。


I'm trying to put a element to the left of a element, however I can't seem to make them the same height and align with each other. The span always seems to be positioned a little higher.

Anyone got any ideas?

Sparkles*

Edit: HTML section

<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>

CSS

span.box{
    position:absolute;
    width:100px;
    margin-left:20px;
    border:1px;
    padding:2px;
    height: 16px;
}

input.name {
    width: 115px;
    height: 14px;
}

解决方案

If you want to vertically align items in the same line, you probably don't need to make them the same height - just give them the same value for the vertical-align property.

.myinput, .myspan {
  vertical-align: middle;
}

What a lot of people don't understand with vertical-align is that in order for things to be vertically aligned to the middle, everything in that line has to have a vertical-align property of 'middle' - not just one thing (like the span).

Imagine an invisible horizontal line running though any inline content. Usually the baseline of text, and the bottom of images, are lined up with this line. However, if you change vertical-align to middle, then the middle of the element (text span, image etc) is aligned with this line. However that's not going to line up vertically with other items if they are still aligning their bottom or baseline to that line - they would need to align their middle to that line too.

这篇关于如何制作&lt; span&gt;与&lt; input type =&quot; text&quot;&gt;相同的高度&gt;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆