如何使 <span> 与 <input type="text"> 的高度相同答案

【问题标题】：How to make <span> the same height as <input type="text">如何使 <span> 与 <input type="text"> 的高度相同
【发布时间】：2010-11-18 12:38:36
【问题描述】：

我试图将一个元素放在一个元素的左侧，但是我似乎无法使它们具有相同的高度并相互对齐。跨度似乎总是定位得更高一点。

有人有什么想法吗？

火花*

编辑：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;
}

【问题讨论】：

请放一段你的代码，解决方案因使用的标签类型而异
如果您尝试标记输入字段，请尝试使用标签标签 (w3schools.com/tags/tag_label.asp)

标签： html css positioning

【解决方案1】：

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

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

很多人对vertical-align 不理解的是，为了使事物垂直对齐到中间，该行中的所有内容都必须具有“middle”的vertical-align 属性——而不仅仅是一个东西（比如跨度）。

想象一条不可见的水平线贯穿任何内联内容。通常文本的基线和图像的底部与这条线对齐。但是，如果将vertical-align 更改为middle，则元素（文本跨度、图像等）的中间将与这条线对齐。但是，如果它们仍将底部或基线与该线对齐，则它们不会与其他项目垂直对齐 - 他们也需要将其中间与该线对齐。

【讨论】：

哇，好用！现在我只是为了匹配身高，谢谢大家！ :)
感谢“该行中的所有内容都必须具有 'middle' 的垂直对齐属性”..！
井的高度可能会因不同的浏览器而异。

【解决方案2】：

这里是 SuperDucks 代码的略微修饰版本：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
    .lbl {
        background-color:lime;
        padding:0;
    line-height: 24px;
    height: 24px;
    display: inline-block;
    }
    .t {
        height:17px;
        padding:0;
        height: 20px;
        display: inline-block;
    }
</style>
</head>
<body>
    <span class="lbl">My label : </span>
    <input class="t" type="text" name="t">
</body>

【讨论】：

请注意 inline-block 在 IE 平台上不可用。否则我是 inline-blocks 的粉丝 =)
你是对的，但从 IE8 开始，它支持，所以，希望有一天，我们可以无忧无虑地使用它
另外，IE 6/7 支持内联元素的内联块，根据这个，它可能有效吗？ quirksmode.org/css/display.html
我没有 ie，但我很想知道，感谢您的评论
是的，编辑评论为时已晚，我要添加。 IE7:n/a IE8:problematic support，它从 IE9 开始，但我们仍然考虑 IE7。而且我听到了，除了测试网站之外，我也从不使用 IE，FX 是我安装操作系统时安装的第一个软件 =)

【解决方案3】：

尝试填充：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <style type="text/css">
        .lbl {
            background-color:lime;
            padding:0;
        }
        .t {
            height:17px;
            padding:0;
        }
    </style>
</head>
<body>
    <span class="lbl">My label : </span>
    <input class="t" type="text" name="t">
</body>

请记住，'span' 是内联元素，而不是块级元素，因此大小定义不适用，除非您使用 'display:block' CSS 属性。内联元素获取内容的大小，因此字体大小等定义了该跨度的高度。

我还会使用带有“for”属性的“label”标签，而不是“span”。这使得结构更好，并且具有通过单击 label 将焦点移动到 input 的优点。

以下是块级示例，它允许每个浏览器逐像素对齐：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <style type="text/css">
.lbl {
    background-color: lime;
    border: 1px solid silver;
    display: block;
    float: left;
    font-size: 12px;
    height: 16px;
    padding: 2px;
    width: 100px;
}
.t {
    border: 1px solid silver;
    display: block;
    float: left;
    font-size: 12px;
    height: 16px;
    margin-left: 4px;
    padding: 2px;
    width: 150px;
}
    </style>
</head>
<body>
    <label class="lbl">My label : </label>
    <input class="t" type="text" name="t">
</body>

【讨论】：

你好，我已经在输入之前使用了标签，这是一个隐藏的跨度，如果向表单返回错误，则会出现。我试过填充，它使它的大小相同，但现在它比输入框高一点。
那是因为输入框的边框。如果您有可见的背景或边框，并尝试逐个像素对齐，那么您可以使用块级，因为字体高度可能会因浏览器和系统而有所不同。我在答案中添加了一个块级示例。
这部分是正确的。 inline-block 元素也可以定义它们的大小