How to make the same height as <input type=“text”>

后端未结

关注

 3  779

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

相关标签:

3条回答

-上瘾入骨i

2021-01-18 11:11

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)

春和景丽

2021-01-18 11:23
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)
发布评论:

提交评论
- 加载中...

甜味超标

2021-01-18 11:23

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)