Создание ссылок придерживаться текстового поля

Question

Привет, ребята, я делаю новый макет для моего сообщества, а теперь я делю его на части. Это всего лишь одна проблема. Я разработал текстовое поле, в котором пользователь может искать, но сразу после текстового поля есть 2 ссылки. Я не знаю, как позволить им держаться вместе. Я пробовал что-то, и это на самом деле работает в Google 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: альтернативный текст http://img411.imageshack.us/img411/8282/searchj.png

и вот как это выглядит в chrome: альтернативный текст http://img22.imageshack.us/img22/2655/searchchrome.png

Answer 1

Для начала вы также можете использовать -webkit-border-top-left-radius: 5px и -webkit-border-bottom-left-radius: 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 */
}