<label>、<input>、テキスト、入力フィールド、実際のボタン、および "<a>リンクボタン"を正しく同じフォントで整列させるにはどうすればよいですか？

Question

私の問題（簡体字）： 私は、テキストのユーザー名、ユーザー名、実際のボタンのテキストを入力するテキスト、 "または"、およびリンクボタンのテキストが正確に同じサイズで同じ "彼らはスムーズに並んでいません...

私はこの自分を固定しましたか？ズームの他の問題 私はこれを完璧に近づけるためにかなりの時間を費やしてきましたが、私の知る限りではそれを満足するまでには至りません。私はウェブサイトの他の部分に取り組んでいる間、私は何ヶ月もあきらめましたが、それは可能であるべきであるという私の心の棘です。スケーリングを使用したときにも問題が発生しました。一部のズームでは完璧に近いように見えましたが、「それが得られるほど良いものです」と考えました。

コードをできるだけ小さくするため、これを私のウェブサイトから削除しました。ユーザー名（あなたが入力したユーザー名）の結果を見ると、「リアルボタン」と「or」と「リンクボタン」はすべて異なる高さです...うまく動かないようです。

また、2つのボタンを重ねると、SIGNという単語の幅が異なります。私が同じフォント、同じサイズ、同じものを使用している場合、なぜ1が他のものより幅が広いのでしょうか？異なる文字間隔ですか？

私はこれをあきらめていましたが、最近、Stackから別のフィドルを見かけました。問題を解決しましたが、ラベルなしで、すべてをライニングしませんでした。このコードはそのコードに基づいています。これを固定することができた場合、私は、私が

PREVIOUS部分解...すべての応答の設計などで自分のウェブサイトにそれを再うまくいく、図：過去には 私はテーブルを使用して物事が並ぶように見えました私はこのような簡単なHTML行のテーブルを作成する必要はないので、テーブルを使用しないようにしていました。

JSFIDDLE： 私はJSFiddleを作成しました。

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; 
} 

私はあなたの時間のために、事前にあなたに感謝 YOUR TIME FOR

MY THANKS私は過去数年間これらの成長を助けてくれました。あなたたち/ガールは私がいくつかの問題を解決するのを助け、あなたの助けは大変に感謝しています。 :)

Answer 1

同じ設定のすべての要素に対してCSSルールを作成し、さらにvertical-align: baselineを追加します。これは同じベースラインのすべてのテキストを並べるべきであり、font-family、font-size、font-weight、font-variationなどが同じであれば、それはあなたが望むように見えるはずです。あなたのフィドルの私のフォークのために

私はちょうど（.mydiv内のすべての要素に影響を与える）、これを追加しました：これをいじると100％でないの後http://jsfiddle.net/f03jvuqb/

Answer 2

：

.mydiv * { 
    display: inline-block; 
    vertical-align: baseline; 
    font-family: Arial sans-serif !important; 
    font-size: 1em !important; 
} 

はここでバイオリンへのリンクですそれに満足しています...私はFlex Boxを見ましたが、これは現在ほとんどのブラウザで普及しています。 Flex Boxを使用すると、魅力的な働きをし、コードはより洗練されたものになりました。すべてが美しく並んでいて、私は結果にとても満足していました。私はこのすべてのいたずら中にたくさんのことを学びました。私はフレックスボックスのコードを別の日に投稿する予定です。