Как создать две вертикально уложенные кнопки рядом с текстовым вводом

Question

Я пытаюсь понять, как вертикально складывать две кнопки (вверх и вниз) рядом с входом, на который они влияют. Я хочу сделать это с помощью CSS и HTML.

<span class="styled-value"> 
    <span class="multiplier-value-wrapper"> 
     <input class="multiplier-value" type="text" value="4" name="family-size" /> 
    </span> 
    </span> 

    <button class="btn btn-small btn-up"> 
    <i class="fa fa-chevron-up"></i> 
    </button> 

    <button class="btn btn-small btn-down"> 
    <i class="fa fa-chevron-down"></i> 
    </button> 

Как вы можете видеть, я использую шрифт Awesome для шевронов вверх и вниз. Я не уверен, как установить две кнопки в стек. Как только я это сделаю, я свяжусь с JS, чтобы контролировать значение ввода текста (уже написано).

Пример того, что я работаю с можно найти здесь: http://codepen.io/anon/pen/WvydgZ

Я подключил в JQuery, JQuery UI и FontAwesome.

желаемого эффекта заключается в следующем:

Любые идеи?

Answer 1

Я думаю, вы должны использовать систему сетки, если вы можете выполнить такие задачи, как это для вас. Кроме того, постарайтесь не использовать <span>, если вам не нужен простой встроенный контент. Я сделал некоторые настройки, пытаясь остаться на оригинал как можно больше ...

.row div{ 
 
    float: left; 
 
} 
 
.input-row{ 
 
    line-height: 30px; 
 
    height: 30px; 
 
} 
 

 
input{ 
 
    height: 30px; 
 
} 
 
button { 
 
    background-color: #4f4f4f; 
 
    border-radius: 0; 
 
    color: white; 
 
    padding: 0 4px; 
 
} 
 
.buttons{ 
 
    width: 20px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="input-row"> 
 
    <div class="styled-value"> 
 
     <div class="multiplier-value-wrapper"> 
 
     <input class="multiplier-value" type="text" value="4" name="family-size" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="buttons">  
 
    <button class="btn btn-small btn-up"> 
 
     <i class="fa fa-chevron-up"></i> 
 
    </button> 
 
    <button class="btn btn-small btn-down"> 
 
     <i class="fa fa-chevron-down"></i> 
 
    </button> 
 
    </div> 
 
</div>

Answer 2

Одним из вариантов является установи input и кнопки в table. Кнопки должны иметь display:block. Как так

<table class='content'> 
<tr> 
<td> 
    <span class="styled-value"> 
    <span class="multiplier-value-wrapper"> 
     <input class="multiplier-value" type="text" value="4" name="family-size" /> 
    </span> 
    </span> 
</td> 
<td> 
    <div class='button-wrapper'> 
    <button class="btn btn-small btn-up"> 
     <i class="fa fa-chevron-up"></i> 
    </button> 

    <button class="btn btn-small btn-down"> 
     <i class="fa fa-chevron-down"></i> 
    </button> 
    </div> 
</td> 
</tr> 
</table> 

demo

Answer 3

Попробуйте использовать список в качестве обертки для кнопок. Пример построения от твоих:

HTML

<span class="styled-value"> 
    <span class="multiplier-value-wrapper"> 
    <input class="multiplier-value" type="text" value="4" name="family-size"/> 
    </span> 
</span> 
<ol class="no-style-list"> 
    <li> 
    <button class="btn btn-small btn-up"> 
     <i class="fa fa-chevron-up"></i> 
    </button> 
    </li> 
    <li> 
    <button class="btn btn-small btn-down"> 
     <i class="fa fa-chevron-down"></i> 
    </button> 
    </li> 
</ol> 

CSS

button { 
    background-color: #4f4f4f; 
    border-radius: 0; 
    color: white; 
    padding: 0 4px; 
} 

.no-style-list { 
    list-style-type: none; 
    padding-left:0; 
    display: inline-block; 
} 

http://codepen.io/anon/pen/KpeZOe