Question

<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元素位于下拉列表下方（抱歉，我不能发布图片，因为我刚刚在5分钟前注册为新用户），

但我想要实现的是：img元素必须位于下拉列表的右侧

我试图以各种不同的方式修改css，但它不起作用，

任何人都可以建议我应该做什么？

Answer 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>

Answer 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>

Answer 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>

Answer 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>

需要在select元素后面放置一个img元素，怎么样？

4 个答案: