Newbie CSS regarding inline-block alignment
Question
I cannot see anything wrong with my code but unfortunately the below code does not line up. I know it has something to do with the font but beyond that i have no idea. I know i can do this with floats, but i want to know why inline-block is not working.
<html>
<head>
<style type="text/css" media="screen">
body {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 10px;
}
.label, .input {
display: inline-block;
height: 30px;
width: 235px;
background-color: E4E4E4;
border: 1px solid #FFFFFF;
padding: 5px;
}
</style>
</head>
<body>
<div class="label">Client</div>
<div class="input"><input type="text" name="client"></div>
</body>
</html>
3 answers
solution1
2 2011-10-26 00:36:16
Try to use vertical-align: bottom; .
solution2
1 2011-10-26 00:35:01
Firstly you missed a # when defining a background colour, but the main problem is:
Try messsing with the vertical-align property. Set it to top , middle , or bottom and see if any of those work for you.
solution3
1 2011-10-26 00:47:38
These folks are right, vertical-align is the issue:
.label, .input {
display: inline-block;
vertical-align: top;
height: 30px;
width: 235px;
background-color: #E4E4E4;
border: 1px solid #FFFFFF;
padding: 5px;
}
Also, so you know, these inline elements are white-space sensitive, so if you don't want space between the elements, do this:
<div class="label">Client></div><div class="input"><input type="text" name="client"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.