Question

早上好，

我正在开发一个Web应用程序，我需要一个水平输入，让用户选择一个值，但单选按钮不是一个选项。我考虑使用范围类型的输入，但IE 8或9不支持此功能。有没有办法水平显示选择选项在chrome和IE中都有效？

我的HTML代码是：

<select size="4">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

目前看起来像这样：

Select

有没有办法让选项并排显示？我尝试在选项中添加内联块显示，但没有任何变化。

---编辑---

我不想使用单选按钮，因为我使用js来创建用户也可以选择的新项目，并且使用单选按钮我必须手动更改按钮名称。

Multiple selects

Answer 1

这是你之后的事吗？

select {
    display:table-row;
}
option {
    display:table-cell;
}

http://jsfiddle.net/rjmnmcru/

Answer 2

您最好的选择可能是使用复选框或带链接的无序列表：

<style type="text/css">
    ul.selections   { list-style:none; }
    ul.selections li    {display: inline; list-style-type: none; padding-right: 20px;}

    div.selections input { margin-left:15px;}
    div.selections input.first { margin-left:20px; }
</style>

<div class="selections">
    <input type="checkbox" value="volvo" class="first"/> Volvo
    <input type="checkbox" value="saab"/> Saab
    <input type="checkbox" value="mercedes"/> Mercedes
    <input type="checkbox" value="audi"/> Audi
</div>

<ul class="selections" >
    <li><a href="#" value="volvo">Volvo</a></li>
    <li><a href="#" value="saab">Saab</a></li>
    <li><a href="#" value="mercedes">Mercedes</a></li>
    <li><a href="#" value="audi">Audi</a></li>
</ul>

您可以使用链接或选中复选框来触发JS事件。为了向最终用户说明，您可以为JS事件中的元素添加“突出显示”类，并根据需要更改背景颜色。

Answer 3

我知道你已经接受了答案，但this也有效。您可以自定义任何内容，包括边框，背景颜色等。

<强> HTML

<div class="container"><span class="user">User 1</span>

    <div class="selectOptions">
        <div class="myOptions">
            <div class="option volvo">Volvo</div>
            <div class="option saab">Saab</div>
            <div class="option mercedes">Mercedes</div>
            <div class="option audi">Audi</div>
        </div>
        <div class="select user1">User 1</div>
    </div>
</div>

<强> CSS

.container {
    overflow:hidden;
    background-color:#ddd;
    padding:5px;
    padding-bottom:7px;
}
.user {
    float:left;
    background-color:#ddd;
    margin-top:2px;
    padding:5px;
}
.user:after {
    content:":";
}
.selectOptions {
    float:left;
    margin-left:5px;
}
.select {
    border:2px solid #333;
    padding:5px;
    text-align:center;
    position:absolute;
    background-color:#ddd;
}
.select:hover {
    background-color:grey;
    cursor:pointer;
}
.myOptions {
    position:absolute;
    top:45px;
    /*42px (height of .select + (padding*2) minus border thickness*/
    border:2px solid #333;
    display:none;
    background-color:#ddd;
}
.option {
    display:inline-block;
    padding:5px;
}
.option:not(:first-of-type) {
    margin-left:-5px;
}
.option:hover {
    background-color:#123456;
    cursor:pointer;
}

<强> JS

$(".select").hover(function () {
    $(this).siblings(".myOptions").css("display", "block");
    $(this).css("background-color", "grey");
}, function () {
    $(this).siblings(".myOptions").css("display", "none");
});
$(".myOptions").hover(function () {
    $(this).css("display", "block");
}, function () {
    $(this).css("display", "none");
    $(this).siblings(".select").css("background-color", "#ddd");
});
$(".option").hover(function () {
    $(this).css("background-color", "#123456");
}, function () {
    $(this).css("background-color", "#ddd");
    var selection = $(this).html();
    if (selection == $(this).parent().siblings(".select").html()) $(this).css("background-color", "grey");
});
$(".option").click(function () {
    var selection = $(this).html();
    $(this).parent().siblings(".select").html(selection);
    $(this).siblings().css("background-color", "#ddd");
    $(this).css("background-color", "grey");
});

HTML选择水平显示的项目

3 个答案: