need to vertically align a span with a input type="text" [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation开发者_如何学C that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 9 years ago.

here is the live link: http://mrgsp.md:8080/awesome/foobar click create and after save to get validation messages (spans), they are vertically aligned a bit higher than the text inputs

How to align them vertically the same as the text inputs ?

---

Not entirely sure about how you're generating the markup on the server side, but a better way of doing the form is to use label - input pairs inside an unordered list. Make the labels inline blocks, give them a width, then use vertical-align to get their alignment centered.

HTML:

<ul>
    <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
    <li><label for="person1">Person 1: </label><input id="person1" name="person1" type="text" /></li>
    <li><label for="hobby">Hobby: </label>
        <select name="Hobby" id="hobby">
            <option value="0">not selected</option>
            <option value="1">swimming</option>
            <option value="2">gaming</option>

        </select>
    </li>
</ul>

CSS:

li label {
    display: inline-block;
    width: 80px;
    vertical-align: baseline;
    text-align: right;
    margin-right: 20px;
}

li input, li select {
    padding: 3px 4px 4px;
    width: 300px;
    border: 1px solid #ccc;
    font-size: 13px;
}

See: http://jsfiddle.net/pCCsg/ for the complete example. If you can't change the markup, this should still work for your current HTML. Just replace the label and input, select selectors with the classes you're using.

---

If all items are aligned that way, assign them a class and use:

position: relative;
bottom: 5px; /* for example */