如何制作&span> span& gt;与< input type =& quot;文本& quot;高度相同 [英] How to make <span> the same height as <input type="text">

问题描述

我正在尝试将元素放在元素的左侧，但是我似乎无法使它们具有相同的高度并彼此对齐.跨度似乎总是位于较高的位置.

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.

有人有什么主意吗?

闪闪发光*

HTML部分

<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;
}

推荐答案

如果您想垂直对齐同一行中的项目，则可能不需要使它们具有相同的高度-只是为它们赋予 vertical-align 属性相同的值.

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.

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