How to make the same height as <input ty

2019-02-22 04:41发布

站内问答 / HTML/CSS
1166 3 5

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

3条回答
乱世女痞
2楼-- · 2019-02-22 05:20

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.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-02-22 05:21

here's an slightly retouched version of SuperDucks code:

<!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>
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
4楼-- · 2019-02-22 05:23

Try padding :

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

Keep in mind 'span' is an inline element, rather than a block level element, so size definitions don't apply, unless you use 'display:block' CSS property. Inline elements get the size of the contents, so things like font size are what define the height of that span.

Also I'd use 'label' tag with the 'for' attribute, rather than a 'span'. This makes a better structure, and has the advantage of moving the focus to the input by clicking on the label.

The following is a block-level example, which allows pixel by pixel alignment for every browser:

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)