Блог

Главная - Вопросы по программированию - нужно поместить элемент img сразу после элемента select, как?

нужно поместить элемент img сразу после элемента select, как?

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

 <html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>

<div >
    <select>
        <option>[select]</option>
    </select>
</div>


<div>
    <img rc="dropDownArrow.png"/>
</div>

</body>
</html>

после выполнения приведенного выше кода элемент img попадает под выпадающий список (извините, я не могу опубликовать изображение в illstrate, поскольку я только что зарегистрировался как новый пользователь здесь 5 минут назад),

НО чего я хочу добиться, так это того, что элемент img должен находиться в правой части выпадающего списка

Я пытался изменить css различными способами, но это не работает,

кто-нибудь может подсказать, что мне следует делать??

Ответ №1:

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

 <div style="width:100px; overflow:hidden; border-right:1px; float:left;">
    <select>
        <option>[select]</option>
    </select>
</div>


<div style="float:left"> 
    <img rc="dropDownArrow.png"/>
</div>

Ответ №2:

Используйте либо свойство css float:

 <div style="width:100px; overflow:hidden; border-right:1px">
    <select style="float:left">
        <option>[select]</option>
    </select>
    <img style="float:left" src="dropDownArrow.png"/>
</div>
<div style="clear:both;"></div>

Или таблица:

 <table>
    <tr>
        <td>
            <select>
                <option>[select]</option>
            </select>
        </td>
        <td>
            <img style="float:right" src="dropDownArrow.png"/>
        </td>
    </tr>
</table>

Ответ №3:

Вам нужно использовать float свойство:

 <div style="width:100px; overflow:hidden; border-right:1px; float:left;">
    <select>
        <option>[select]</option>
    </select>
</div>


<div>
    <img rc="dropDownArrow.png" style="float: right;"/>
</div>

Ответ №4:

Ваш код должен быть изменен на:

 <div style="width:100px; overflow:hidden; border-right:1px;float:left">
    <select>
        <option>[select]</option>
    </select>
</div>

<div style="float: left">
    <img rc="dropDownArrow.png"/>
</div>