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

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使用and可以获得相同的效果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

You could wrap the ul in a div like below and just add display:inline-block; to the "test" class.

 <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默认情况下仍然是块级元素。您可能想要覆盖它。