html - Checkbox/radio in li 元素 float right issue Firefox

Question

我正在尝试在 li 标签中使用复选框/单选按钮。我想将我的复选框/单选按钮拉到 li 元素的右侧。 Webkit 浏览器没有这方面的问题，但 Firefox 将复选框/单选按钮移到下一行。

为此，我正在使用 Bootstrap 3 .dropdown-menu。

HTML

<form id="advenced-search-form" class="form" method="get" action="/search">
    <div class="input-group add-bottom">
        <input type="text" class="form-control" placeholder="Search...">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-caret-down text-primary"></i>

            </button>
            <ul class="dropdown-menu advenced-action pull-right" role="menu">
                <li class="dropdown-header">Advenced search filters</li>
                <li>
                    <label class="text-uppercase advenced-search-label"> <strong>Clients</strong>&nbsp;
                        <input type="checkbox" value="1" id="checkbox1" class="advenced-search-checkbox">
                    </label>
                </li>
                <li>
                    <label class="text-uppercase advenced-search-label"> <strong>Services</strong>&nbsp;
                        <input type="checkbox" value="2" id="checkbox2" class="advenced-search-checkbox">
                    </label>
                </li>
                <li>
                    <label class="text-uppercase advenced-search-label"> <strong>Resources</strong>&nbsp;
                        <input type="checkbox" value="3" id="checkbox3" class="advenced-search-checkbox">
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <button type="submit" class="btn btn-info btn-5x25 add-bottom pull-right">Search&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-right"></i>
    </button>
</form>

CSS

.dropdown-menu > li > label {
    display: block;
    font-weight: normal;
    text-decoration: none;
    color: #727272;
    line-height: 18px;
    padding: 5px 20px;
    margin: 0;
    white-space: nowrap;
}
.dropdown-menu > li > label:hover, .dropdown-menu > li > label:focus {
    background: #f6f6f6;
    cursor:pointer;
}
/*.dropdown-menu > li > label > strong, .dropdown-menu > li > label > span {
              float: right;
            }*/
 .dropdown-menu > li > label > input[type="radio"], .dropdown-menu > li > label > input[type="checkbox"] {
    margin: 4px 0 0 0px;
    float: right;
}
.dropdown-menu.advenced-action {
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#e6e6e6), to(#f5f5f5));
    background-image: -webkit-linear-gradient(top, #e6e6e6, 0%, #f5f5f5, 100%);
    background-image: -moz-linear-gradient(top, #e6e6e6 0%, #f5f5f5 100%);
    background-image: linear-gradient(to bottom, #e6e6e6 0%, #f5f5f5 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#fff5f5f5', GradientType=0);
    padding-bottom: 0;
}
.dropdown-menu.advenced-action > li {
    border-bottom:solid 1px #cccccc;
}
.dropdown-menu.advenced-action > li:last-child {
    border-bottom: none;
}

我在 Bugzilla 站点上搜索了这个问题的解决方案，但我没有找到任何东西。 谁能帮我解释一下这个问题？

Answer 1

检查我的解决方案。我知道它并不完美，但它确实有效。

HTML

<label class="text-uppercase advenced-search-label">
   <div class="d1"><strong>Clients</strong></div>
   <div><input  type="checkbox" value="1" id="checkbox1" class="advenced-search-checkbox" /></div>                      
</label>

CSS

.d1 {
    width:100%;
    float:left;
}