0

セグメント化されたコントロール (順序付けされていないリスト) と選択を同じ行に保持しようとしていますが、その方法がわかりません。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>

ありがとう！

4

4 に答える 4

0

あなたが探しているのは です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;
}
于 2013-04-02T17:16:25.313 に答える
0

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>
于 2013-12-20T21:44:54.423 に答える
-1

ULデフォルトではまだブロックレベルの要素です。おそらくそれをオーバーライドしたいでしょう。

于 2013-04-02T17:07:02.210 に答える