Question

我正在编写一个关于从here创建可配置下拉列表的示例。它仍然是一项正在进行的工作，但我试图保持干净，并将我的内联样式声明移动到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仍然设置在适当的范围内。渲染器似乎忽略了它。

我有没有办法在4大浏览器的样式表中使用float:right，还是我必须将其内联在元素中？

谢谢！

Answer 1

您是否需要将float元素放在希望它浮动的内容之前？

我撤消了您的:first-child和:last-child css样式，颠倒了跨度的顺序，并删除了内联样式并且它有效：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;
}

float：当使用内部样式表而不是内联样式时，右侧在chrome和safari中表现不同

1 个答案: