MY PROBLEM (brief): I would like the text Username, the text you type for the Username, the Real Button Text the "or" and the Link Button Text to be exactly the same size and on the same "line" - they don't line up smoothly...
HAVE I TRIED FIXING THIS MYSELF? OTHER PROBLEMS WITH ZOOMING I've spent considerable time trying to get this aligned as close to perfect as I can get however, with my knowledge I can never get it lined up to satisfaction. I gave up for many months while I worked on other parts of the website but it's a thorn in my mind that it SHOULD be possible. I also had problems when I used scaling - in some zooms it looked so close to perfect I figured "That's as good as I can get it!".
I cut this out of my website to make the code as small as possible. If you look at the result - the Username (the username you type), the "Real Button" and the "or" and the "Link Button" are all different heights... it doesn't seem to flow nicely.
Also, if you put the 2 buttons on top of each other the word SIGN is different widths. If I'm using the same font, same size, same everything, why would 1 be wider than the other? Different letter spacing?
While I did give up on this, recently I saw another fiddle from Stack that kinda solved the problem but without labels and without lining everything up. THIS code is based on that code. I figure, if this can be fixed, I'll re-work it into my website with all the responsive design etc...
PREVIOUS PARTIAL SOLUTIONS: In the past I used tables and things seemed to line up better but I was trying not to use tables for this as you shouldn't have to create a table for such a short simple line of HTML.
JSFIDDLE: I created a JSFiddle so you can see.
http://jsfiddle.net/PerryCS/7zc2vjmx/2/
HTML CODE：
<form id="loginForm1" name="loginForm1?callingPage=validateForm" method="post" action="index.php" accept-charset="utf-8">
<h5 class="text-center">In order to access some areas of the website, save estimates.</h5>
<div class="mydiv">
<label for="username">Username</label>
<input type="text" id="username" name="username">
</div>
<div class="mydiv">
<label for="pword">Password</label>
<input type="password" id="pword" name="pword">
</div>
<div class="mydiv">
<input class="button" type="button" name="buttonSignIn" value="SIGN IN"> or
<a class="button" href="#">SIGN UP</a>
</div>
</form>
CSS代码
body {
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
input.button {
height: 28px;
font-size: 1em;
color: white;
font-weight: normal;
font-style: normal;
background: #4D28B2;
border: 1px solid gray;
vertical-align: middle;
padding: 0px 5px;
}
a.button {
display: inline-block;
height: 28px;
font-size: 1em;
color: white;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;
background-color: #4D28B2;
border: 1px solid gray;
vertical-align: middle;
line-height: 28px;
padding: 0px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
input {
height: 28px;
font-size: 1em;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;
background-color: #4D28B2;
border: 1px solid gray;
vertical-align: middle;
line-height: 28px;
padding: 0px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.mydiv {
display: inline-block;
}
我感谢你的时间 我提前感谢你在过去几年里帮助我成长的时间。你们/ gals帮助我解决了一些问题，非常感谢你的帮助。 ：）
答案 0 :(得分：1)
为具有相同设置的所有这些元素创建CSS规则，并添加vertical-align: baseline。这应该排在同一基线的所有文本，如果font-family，font-size，font-weight，font-variation等相同，它应该看起来像你想要的那样。
对于我的小提琴我只是添加了这个（影响.mydiv内的所有元素）：
.mydiv * {
display: inline-block;
vertical-align: baseline;
font-family: Arial sans-serif !important;
font-size: 1em !important;
}
以下是小提琴的链接：http://jsfiddle.net/f03jvuqb/
答案 1 :(得分：0)
在摆弄了这个并且不是100％满意之后......我调查了Flex Box，它在大多数浏览器中现在非常受欢迎。使用Flex Box就像一个魅力，代码更清洁。一切都排好了，我对结果非常满意。在这一切修补过程中，我学到了很多东西。当我有更多时间时，我会在另一天发布Flex Box代码。