2

我正在研究一个关于制作可配置下拉菜单的示例，从这里。它仍在进行中，但我试图保持干净，并将我的内联样式声明移动到 html 文件头部的内部样式表中。

这是一个小提琴。

奇怪的是 html 的第 9 行，这里显示为第二个跨度行：

<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来自内部样式表的似乎被忽略了。对于它的价值，至少在 chrome 中，float:right仍然设置在适当的跨度上。渲染器似乎只是忽略了它。

有没有办法让我float:right在四大浏览器的样式表中使用，或者我必须将它内联在元素中？

谢谢！

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 回答