Question

我正在尝试在同一行上保留分段控件（无序列表）和选择，但我无法弄清楚如何执行此操作。我认为它就像使用display：inline-block;

一样简单

我把所有东西放在一个范围内：

<span style="display:inline-block;">
    <select name="my_select1"><option value="1">1</option><option value="2">2</option></select>
    <ul class="segmentedControl">
      <li class="selected">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <select name="my_slect2"><option value="1">1</option><option value="2">2</option></select>
</span>

我的小提琴就在这里：http://jsfiddle.net/LdZk8/39/

我是否遗漏了一些关于我需要在CSS中设置的内容？

编辑：我想我可以通过使用divs / float来实现，这是愚蠢的吗？

<div style="float:left;">
    <select name="my_select1"><option value="1">1</option><option value="2">2</option></select>
</div>
<div style="float:left;">
    <ul class="segmentedControl">
      <li class="selected">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
</div>
<div style="float:left;">
    <select name="my_slect2"><option value="1">1</option><option value="2">2</option></select>
</div>
<div style="clear:both;"></div>

谢谢！

Answer 1

将select和ul设置为float:left;：Fiddle

Answer 2

您正在寻找的是inline-box。以下修改将执行此操作：

http://jsfiddle.net/LdZk8/41/

.segmentedControl {
    display: -moz-inline-box;
    -moz-box-orient: horizontal;
    -moz-box-pack:justify;
    -moz-box-sizing: border-box;

    display: -webkit-inline-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:justify;
    -webkit-box-sizing: border-box;

    width:100px;
    height:22px;
}

但是，没有理由将Flexbox用于此目的（更不用说您只包含过时规范中的属性）。使用display: inline-table和display: table-cell可以获得相同的效果，它比Flexbox有更广泛的支持：

http://jsfiddle.net/LdZk8/42/

.segmentedControl {
    display: inline-table;
    width:100px;
    height:22px;
}


.segmentedControl > li
{
    display: table-cell;

    border: solid 1px #9a9a99;
    border-left: none;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius:0px;

    text-align: center;

    background: #fbfbfb; /* Old browsers */
    background: -moz-linear-gradient(top, #fbfbfb 0%, #bdbdbd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#bdbdbd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#bdbdbd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fbfbfb 0%,#bdbdbd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fbfbfb 0%,#bdbdbd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fbfbfb 0%,#bdbdbd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#bdbdbd',GradientType=0 ); /* IE6-9 */

    color: #6b6b6b;
    font-size: 10px;
    padding: 2px;
}

Answer 3

您可以将ul打包到下面的div中，只需将display:inline-block;添加到“测试”类中。

 <select name="my_select1"><option value="1">1</option><option value="2">2</option></select>
 <div class="test">
    <ul class="segmentedControl">
      <li class="selected">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
 </div>
 <select name="my_slect2"><option value="1">1</option><option value="2">2</option></select>

Answer 4

默认情况下，

UL仍然是块级元素。你可能想要覆盖它。

CSS - 将选择与无序列表保持在同一行

4 个答案: