如何在文本输入

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>

正如你所看到的，我正在使用Font Awesome来制作上下V形臂。我不确定如何让两个按钮堆叠。一旦我这样做，我将绑定JS来控制文本输入值（已经写好）。

我可以在此处找到我正在使用的示例：http://codepen.io/anon/pen/WvydgZ

我已经插入了jQuery，jQuery UI和FontAwesome。

理想的影响是这样的：

有什么想法吗？

Answer 1

我认为你应该使用网格系统，如果你能为你完成这样的任务。此外，除非您想要简单的内联内容，否则请尽量不要使用<span>。我做了一些调整，试图尽可能地保持原始状态......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用列表作为按钮的包装。建立你的一个例子：

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

Answer 3

一个选项是将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