将按钮放在输入框内

Question

我有什么

<form class="input-group-1 well" id="spinner-form">
    <input id="input1" class="form-control" type="text">
    <a class="btn" id="up-button">
        <span class="glyphicon glyphicon-chevron-up"></span>
    </span>
    <a class="btn" id="down-button">
        <span class="glyphicon glyphicon-chevron-down" ></span>
    </a>
</form>

它看起来像什么：

我想要的是什么：

我使用bootstrap，这里有一些覆盖的样式

   <style>
        .input-group-1 {
            width: 300px;
            margin-bottom: 50px;
        }
        a {
            color: #737577;
        }
    </style>

我不确定如何编辑css来获取此信息，请帮助!!

由于

Answer 1

像这样：

jsFiddle

这是相关的CSS / HTML

<强> HTML

<div class="input-stack">
    <input id="input1" class="form-control" type="text" />
    <a class="btn" id="up-button">
        <span class="glyphicon glyphicon-chevron-up">^</span>
    <a class="btn" id="down-button">
        <span class="glyphicon glyphicon-chevron-down">v</span>
    </a>
</div>

<强> CSS

.input-stack {
    display: inline-block;
    position: relative;
}
.input-stack input {
    padding: 4px;
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    border: solid 1px #999;
    border-radius: 2px;
}
a.btn {
    position: absolute;
    right: 5px;
    z-index: 2;
}
#up-button {
    top: 2px;
}
#down-button {
    bottom: 2px;
}