need to vertically align a span with a input type="text" [closed]
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 label
s 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 */
精彩评论