在选择选项内向右推文本

Question

无论如何在选项标签的末尾推送文字？

我想在左侧有一些文字，在最后有些文字。 如下图所示。

我希望有人能帮助我。

三江源！

Answer 1

您可以使用float：left和float：在某些元素上执行您所要求的操作。

<a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false" style="
        float: left;
        width: 50%;
        display: inline-flex;
        position: absolute;
"><span class="text">Mustard</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
<a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false" style="
    float: right;
    width: 50%;
    display: inline-flex;
"><span class="text">Mustard</span><span class="glyphicon glyphicon-ok check-mark"></span></a>

如果您可以提供更多信息，我会尝试编辑我的答案。

Answer 2

它无法在默认行为select box中实现。

必须使用自定义代码。

尝试以下小提琴它可能会帮助你。

＆＃13;

＆＃13;

$(document).on('click', ".dropdown-menu li a", function() {
   var selText = $(this).html();
   $(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
   $(".default_option").remove();
   $(".dropdown-menu").prepend("<li class='default_option'><a>Default Option</a></li>");
}); 

＆＃13;

.dropdown-menu {
    left: 0;
    padding: 0;
    width: 50%;
    margin: 0;
}
 button.btn.btn-default.dropdown-toggle {
    width: 50%;
}
button.btn.btn-default.dropdown-toggle {
    padding: 5px 12px;
    margin-top: 0;
    position: relative;
}
.dropdown-menu li {
    margin: 0;
    padding: 0;
    line-height: 0;
}
.dropdown .dropdown-menu>li>a {
    display: inline-block;
    padding: 12px;
    clear: both;
    font-weight: 400;
    line-height: 1;
    color: #333;
    white-space: nowrap;
    width: 100%;
    cursor: pointer;
}
.dropdown-menu li {
    margin: 0;
    padding: 0;
    line-height: 0;
}
button.btn.btn-default.dropdown-toggle {
    margin: 5px 0 0;
    text-align: left;
}
.btn .caret {
    margin-right: 0;
    float: right;
    margin-top: 2.5%;
    position: absolute;
    right: 15px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
.btn.dropdown-toggle span.pull-right {
    margin-right: 20px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">Default Option<span class="caret"></span></button><ul class="dropdown-menu treatment-select"><li><a data-treatment="4"><span class="pull-left">S</span><span class="pull-right">€18.00</span></a></li><li><a data-treatment="5"><span class="pull-left">XS</span><span class="pull-right">€9.00</span></a></li><li><a data-treatment="6"><span class="pull-left">M</span><span class="pull-right">€25.00</span></a></li></ul></div>

＆＃13;

＆＃13;

＆＃13;