Элемент диапазона, не совпадающий с элементом кнопки?

Question

Я пытаюсь сделать калькулятор цены/конвертер для биткойна.

Я использую элемент span для своего окна ввода, поэтому он автоматически изменяет размер текста. Я получил весь код javascript и backend, но теперь я просто работаю над этим интерфейсом.

Вот пример моей проблемы - 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> 

Как сделать коробку диапазона, сосредоточенный вокруг текста, поэтому он выглядит как одна линия?

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>

Просмотр