如何在文本输入旁边创建两个垂直堆叠的按钮

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>，除非你想要简单的内联内容。我做了一些调整，试图尽可能地保持你原来的样子......

.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

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

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