html - 将按钮放在输入框内

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