2

ここから、構成可能なドロップダウンを作成する例に取り組んでいます。それはまだ進行中の作業ですが、私は物事をきれいに保ち、インライン スタイル宣言を html ファイルの先頭にある内部スタイル シートに移動しようとしていました。

ここにフィドルがあります。

奇妙なのは、html の 9 行目で、ここでは 2 番目のスパン行として示されています。

<dl id="sample" class="dropdown">
    <dt><a href="#" class="uiwidgetcontent uiborderall" style="width: 200px;">
        <span>Please select the country</span>
        <span class="ui-icon ui-icon-triangle-1-s" style="float:right;"></span>
    </a></dt>

予想どおり、これはすべてのブラウザーで正常に機能します。しかし、ヘッダーのスタイリングでは、同じことをspan:last-child行に入れました。（コンテキストのためにスタイルセクション全体を残しました）：

    .uiborderall {
        border-radius: 18px;
    }
    .uiwidgetcontent {
        background-color: #abc;
    }
    .dropdown dd, .dropdown dt, .dropdown ul { margin: 0px; padding: 0px; }
    .dropdown dd { position: relative; }
    .dropdown a, .dropdown a:visited { text-decoration: none; outline: none; display: inline-block;}
    .dropdown dt a:hover, .dropdown dt a:focus { color: #5d4617; border: 1px solid #5d4617;}
    .dropdown dt a {display: inline-block; border: 1px solid #d4ca9a;}
    .dropdown dt a span:first-child {cursor: pointer; padding: 5px; display: inline-block; }
    .dropdown dt a span:last-child {cursor: pointer; float: right; margin-right: 10px; }
    .dropdown dd ul { display:none; left:0px;  position:absolute; top:1px; width:auto; min-width:170px; list-style:none; }
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover {}

要素からインライン スタイルを削除できる必要があり<span>、内部スタイル シートにフォールバックする必要があります。Firefox と IE では、これで問題なく動作します。ただし、Chrome と Safari では、これを行うとfloat: right、内部スタイル シートの が無視されるようです。価値があるのは、少なくともクロムでfloat:rightは、まだ適切なスパンに設定されているためです。レンダラーはそれを無視しているように見えます。

float:rightビッグ 4 ブラウザーのスタイル シートでを使用する方法はありますか、それとも要素にインラインで配置する必要がありますか?

ありがとう！

4

1 に答える 1

2

float浮かび上がらせたいコンテンツの前に要素を配置する必要はありませんか?

私はあなた:first-childと:last-childCSSのスタイルを逆にし、スパンの順序を逆にし、インラインスタイルを削除しました.http: //jsfiddle.net/3xbcF/1/

<dl id="sample" class="dropdown"> <dt><a href="#" class="uiwidgetcontent uiborderall" style="width: 200px;">
        <span class="ui-icon ui-icon-triangle-1-s"></span>
        <span>Please select the country</span>
    </a></dt>

CSS:

.dropdown dt a span:last-child {
    cursor: pointer;
    padding: 5px;
    display: inline-block;
}
.dropdown dt a span:first-child {
    cursor: pointer;
    float: right;
    margin-right: 10px;
}
于 2013-04-19T15:00:20.483 に答える