Html 使链接粘贴到文本字段

嘿，伙计们，我正在为我的社区做一个新的布局，现在我要把他切成碎片。他们的问题只有一个，我设计了一个文本字段，用户可以在其中搜索，但文本字段后面有两个链接。我不知道如何让他们粘在一起。我试过一些东西，它在谷歌chrome上确实有效，但在谷歌chrome上却不行

.searchbox {
    background: url('../images/searchbox.gif') no-repeat;
    border: 0px; 
    height: 24px;
    width: 308px;
    font-size: 11px;
    padding: 1px -15px 0px 10px;
}
.options {
    background: url('../images/options_active.gif') repeat-x;
    background: url('../images/options.gif') repeat-x;
    font-size: 10px;
    padding: 6px;
    margin: 0 0 0 -10px;
    color: #6b6b6b;
}
.options:active {
    background: url('../images/options_active.gif') repeat-x;
    color: #000;
}
.button {
    background: url('../images/button_bg_active.gif') repeat-x;
    background: url('../images/button_bg.gif') repeat-x;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    padding: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
}
.button:active {
    background: url('../images/button_bg_active.gif') repeat-x;
}

这就是我的css文件中的内容

这是我的html文件：

<div id="topbar">
    <form method="post" action="">
        <input type="text" class="searchbox" name="searchbox" value="Zoek events, nieuws, dj's, foto's en veel meer..." />
        <a href="#showOptions" class="options" title="Advanced options">Advanced options</a>
        <a href="#submitform" class="button" title="Zoeken!">Zoeken!</a>
    </form>
</div>

以下是它在firefox中的外观：

这就是它在chrome中的外观：

---

首先，您可能还希望使用-webkit border左上角半径：5px和-webkit border左下角半径：5px来获得与Chrome和Safari相同的效果

我会做如下的事情：

.form {
    position: relative; /* Alows you to absolutely position child elements */
}

.searchbox {
    float: left;
    position: absolute;
}
.options, .button {
    float: right;
    position: absolute;
}
.options {
    right: -30px; /* Width of the button to its right */
}

---

填充值不能为负数。请定义“粘在一起”按钮。这些按钮的边框需要连在一起，中间没有空格。