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

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的向上和向下箭头图标。我不确定如何使这两个按钮堆叠在一起。一旦我完成这个任务，我将连接JS来控制文本输入值（已经编写好了）。

您可以在此处找到我正在使用的示例：http://codepen.io/anon/pen/WvydgZ 我已经插入了jQuery、jQuery UI和FontAwesome。

期望的效果如下： 有什么想法吗？

- Patrick

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>

- ODelibalta

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

- Joe

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>

演示

- depperm

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Patrick