Question

我正在尝试将元素放在元素的左侧，但是我似乎无法使它们具有相同的高度并且彼此对齐。跨度似乎总是略高一些。

有人有任何想法吗？

闪耀*

修改：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;
}

Answer 1

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

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

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

想象一下，通过任何内联内容运行一条不可见的水平线。通常，文本的基线和图像的底部与此行对齐。但是，如果将vertical-align更改为middle，则元素的中间（文本范围，图像等）将与此行对齐。然而，如果它们仍然将它们的底部或基线与该线对齐，则不会与其他项垂直对齐 - 它们也需要将它们的中间对齐到该线。

Answer 2

尝试填充：

<!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属性。内联元素获取内容的大小，因此字体大小等内容定义了该跨度的高度。

另外，我使用'label'标签和'for'属性，而不是'span'。这样可以提供更好的结构，并且具有通过单击标签将焦点移动到输入的优势。

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

<!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>

Answer 3

这是一个稍微修改过的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>

如何使<span>与<input type =“text”/> </span>的高度相同

3 个答案: