Позиционирование кнопок в форме HTML

Question

Вот мой HTML:

<tr>   
                <td>
                    <div class="fileinputs">
                    <input type="submit" name="submit" class="submit" />
                    </div>
                    <div class="fileinputs">
                            <input type="file" class="file" name="uploadedfile" />
                        <div class="fakefile">
                                <img src="uf_btt.png" />
                        </div>
                    </div>
                    <div class="fileinputs">   
                    <input type="reset" class="reset" />
                    </div>
                    <div class="fileinputs">
                    <input type="button" class="print" onclick="window.print()" />
                    </div>
                </td>   
            </tr>

А вот и мой CSS:

div.fileinputs {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

В результате кнопки расположены вертикально, одна под другой. В IE видна только кнопка «Загрузить файл». Мне нужно, чтобы все кнопки были расположены горизонтально, одна рядом с другой, и чтобы они выглядели одинаково во всех браузерах. Как мне это получить? Спасибо!

Answer 1

вы можете узнать о CSS float .в качестве альтернативы используйте SPAN вместо DIVS или DIV с стилем display: inline