HTML 选择菜单下拉菜单：从右到左答案

【问题标题】：HTML Select menu dropdown: from right to leftHTML 选择菜单下拉菜单：从右到左
【发布时间】：2013-05-17 03:14:28
【问题描述】：

我正在尝试使 HTML 选择菜单的下拉菜单从右侧开始并流向左侧。就像这里的那个 - http://www.flipkart.com/ 但它没有发生。它目前从左开始并向右流动。在 IE 中，下拉菜单被隐藏了。

代码 -

<div class="search fr curves3">  
    <input class="main_search curves3" type="text" value="" placeholder="Search for items">
    <span style="border-left:1px solid #999; float:left;">
    <select>
        <option>All Categories</option>
        <option>Cat</option>
        <option>Dog</option>
        <option>Bird Categories Categories Categories</option>
        <option>Aquatics</option>
    </select>
    </span>
    <input type="submit" value="search" name="Search">
</div>

CSS -

.search {
border:1px solid #999;
}
.search .main_search {
float:left;
padding: 7px 0 7px 5px;
border:0;
outline:none;
margin:0;
}
.search select {
float:left;
border:0;
outline:none;
padding: 7px 10px 7px 10px;
margin:0;
width:130px;
}

JSfiddle - http://jsfiddle.net/generalsagar/gQxR7/

那么如何让下拉菜单从右开始，然后向左流动呢？谢谢

【问题讨论】：

标签： html css

【解决方案1】：

使用absolute定位。您的搜索框 CSS 将是这样的

.search {
    border:1px solid #999;
    position:absolute;
    right:0;
}

JS Fiddle Demo

【讨论】：

在 IE 中，下拉菜单的宽度也与选择相同。所以一半被隐藏了。
@SagarRaj IE浏览器兼容性问题，可以使用html5shiv.js，可以从here下载，也不要忘记添加reset.css 在您将获得 here 的自定义 css 文件之前。希望这会对你有所帮助。