スパン要素がボタン要素と整列していませんか？

Question

ビットコインの価格計算機/コンバータを作ろうとしています。

私は入力ボックスにspan要素を使用していますので、自動的にテキストのサイズが変更されます。私はすべてのjavascriptとバックエンドのコードを手に入れましたが、今はこのUIで作業しています。

は、ここに私の問題の例だ - https://jsfiddle.net/0547g3be/

<div style="text-align:center;margin-top:45%"> 
<span id="output"> 
     <span contenteditable="true" class=leftseg></span><button class="rightseg" >USD</button> 
     </span> 
</div> 

私はテキストを中心とスパンボックスを作るにはどうすればよいので、1行のように見えますか？

Answer 1

あなただけ<span>上の二つのものが必要です。

padding: 1px; 
vertical-align: middle; 

ボタンを最後に。

.rightseg { 
 
    text-decoration: none; 
 
    border-radius: 0 .25em .25em 0; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: #cccccc; 
 
    margin-left: 0.75%; 
 
    display: inline-block; 
 
    height: 100%; 
 
    padding-right: 2%; 
 
    padding-left: 2%; 
 
    font-family: "Open Sans"; 
 
    font-size: 150%; 
 
    min-height: 35px; 
 
    font-weight: 100; 
 
    background-color: #f4f4f4; 
 
    text-decoration: none; 
 
    outline: 0 !important; 
 
    box-shadow: none; 
 
    vertical-align: middle; 
 
} 
 
.leftseg { 
 
    text-decoration: none; 
 
    border-radius: .25em 0 0 .25em; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: #cccccc; 
 
    margin-left: 0.75%; 
 
    display: inline-block; 
 
    height: 100%; 
 
    padding-right: 0.5%; 
 
    padding-left: 0.5%; 
 
    font-family: "Open Sans"; 
 
    font-size: 150%; 
 
    min-height: 35px; 
 
    font-weight: 100; 
 
    background-color: #f4f4f4; 
 
    text-decoration: none; 
 
    outline: 0 !important; 
 
    box-shadow: none; 
 
    min-width: 12.5%; 
 
    padding: 1px; 
 
    vertical-align: middle; 
 
}

<div style="text-align:center;margin-top:45%"> 
 
    <span id="output"> 
 
    <span contenteditable="true" class=leftseg></span> 
 
    <button class="rightseg" onfocus="if (!this.active) this.active = true; numFocus()" onmousedown="this.active = this.active || (doc.activeElement !== this)" onmouseup="var a = this.active; this.active = false; if (a) return false">USD</button> 
 
    </span> 
 
</div>

プレビューが