CSS помогите пожалуйста, 2 объекта отказываются оставаться на одной линии

Question

Прошу прощения за то, что я css noob, и буду признателен, если кто-то направит меня в правильном направлении.нажав на страницу, вы заметите, что значок «Выбрать файлы» и значок «Загрузить файлы» не находятся на одной строке.

Значок «Выбрать файлы» на самом деле является значком загрузки psuedo, который перекрывает реальный

Прямо сейчас, когда я пытаюсь поместить две иконки рядом друг с другом, значок «Загрузить файлы» перемещается в следующий раз, и мне нужно, чтобы эти два объекта были на одной линии.

Так что, если бы кто-то мог посоветовать метод, чтобы сделать это, вы бы сделали меня одним счастливым туристом.

:) Спасибо

Answer 1

<div style="width:200px;">
<div style="width:98px;float:left;">Select files</div>
<div style="width:98px;float:left;">Upload files</div>
</div>

Answer 2

вам нужно установить:

.fakeupload нужно иметь ширину т.е. и плавать: слева

# file_picker_container ширина: 0; плавать: слева;

Див вокруг кнопки загрузки ширина: 40%; плавать: слева;

Откройте страницу с помощью firebug и поиграйте с CSS

Answer 3

вот как я это сделал:

HTML-код вокруг кнопки загрузки со встроенным стилем, который я изменил на:

<div style="position: absolute; right: 0pt; top: 0pt;">     <div id="upload_buttons_container">
        <!--<input type="image" SRC="templates/default/images/Flexshare-Reset.png" id="reset_button" name="reset_button" value="Reset" class="upload">-->
        &nbsp;&nbsp;&nbsp;
        <input type="image" class="upload" value="Upload" name="upload_bn" id="upload_button" src="images/uploadfiles.PNG">
      </div></div>

В CSS я внес следующие изменения:

.upload {
position:relative;
width:100%;
}

#upload_buttons_container {
width:300px;
}

form .fakeupload {
background:url("../images/selectfiles.PNG") no-repeat 100% 100% transparent;
height:75px;
width:300px;
}

Answer 4

Попробуйте с:

<div style="float: left; width: 50%;">
select files
</div>
<div style="float: right; width: 50%;">
upload files
</div>