css右浮动选项更改了选择器

我制作了一个简单的选择器，如下所示：

当我使

浮动：右

时，我得到了以下结果：

请查看红色圆圈以了解问题所在

css

/*CSS*/
挑选{
填充：3倍；
保证金：0；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
浮动：对；
-webkit盒阴影：0 3px 0#ccc，0-1px#fff插图；
-moz盒阴影：0 3px 0#ccc，0-1px#fff插图；
盒影：0 3px 0#ccc，0-1px#fff插图；
背景：#f8f8；
颜色：#888；
边界：无；
大纲：无；
显示：内联块；
-webkit外观：无；
-moz外观：无；
外观：无；
光标：指针；
}
/*仅针对Webkit浏览器。FF将显示带有如此多填充的下拉箭头*/
@媒体屏幕和（-webkit最小设备像素比：0）{
选择{padding right:18px}
}
标签{位置：相对}
标签：后{
内容：''；
字体：11px“控制台”，monospace；
颜色：#aaa；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
右：8px；顶部：2px；
填充：0 0 2px；
边框底部：1px实心#ddd；
位置：绝对位置；
指针事件：无；
}
标签：之前{
内容：''；
右：6px；顶部：0px；
宽度：20px；高度：20px；
背景：#f8f8；
位置：绝对位置；
指针事件：无；
显示：块；
}

---

我更改的

float:right

，这使得问题存在于

css

中的

select

中，在没有更多HTML/css的情况下识别有点棘手，但这似乎是因为选择框和用红色圈出的元素是两个独立的元素，而您只浮动了一个

---

您可能要做的是将这两个函数都包装在

div

中，并将

float:right

应用于该函数。这意味着

div

中的所有内容都是浮动的（选择框和包围的元素）

您能用HTML和CSS创建JSFIDLE吗？帮助您更容易。请仔细使用

选择器

。这是一个自定义选择字段，与您在图像中正确命名的字段类似。此外，您的元素是

内联块

，当您使其浮动时，它将成为

块

元素。

/* The CSS */
select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:right;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}