Question

我正在开发一个画布应用程序来绘制和放置颜色并更改标记大小，对于标记尺寸，我放置了一些不同尺寸的线条（线条粗），请检查附加图像以获得更清晰

我一直在尝试下面的代码，但它看起来不像油漆大小下拉

<ul class="dropdown-menu" aria-labelledby="markerSizeChange" id="markerSizeList" style="left:390px;background-color: white !important;">
    <li><hr style="margin-top: 5px;margin-bottom: 5px;"></li><hr style="margin-top: 5px;margin-bottom: 5px;">
    <li><hr style="margin-top: 5px;margin-bottom: 5px;"></li><hr style="margin-top: 5px;margin-bottom: 5px;">
    <li><hr style="margin-top: 5px;margin-bottom: 5px;"></li><hr style="margin-top: 5px;margin-bottom: 5px;">
    <li><hr style="margin-top: 5px;margin-bottom: 5px;"></li>
</ul>

Answer 1

尝试不以使用内联样式，因为您只能使用!important或jQuery / Javascript覆盖它。我稍微修改了你的代码。我已删除了<hr>，因为您自己过度复制并在li中添加了一个范围，并添加了不同的height。

工作小提琴here

我希望它可以帮到你：

＆＃13;

$('.dropdown li').on('click', function(){
    $('#markerSizeList li.active').removeClass('active'); 
    $(this).addClass('active'); 
    var getHeightOfSelectedElement = $($(this).find('span').height());
    $('#dropdownMenu1').html("<span></span>");
    $('#dropdownMenu1 span').css({ 'height': getHeightOfSelectedElement[0] + 'px', 'display': 'inline-block', 'width': '100%', 'background-color': '#000'})
});

＆＃13;

.dropdown-menu {
  background-color: #fff;
  padding: 0;
  width: 100%;
}
.dropdown-menu li {
  list-style: none;
  margin: 5px 0px;
  padding: 5px 0px;
  border: 1px solid #fff;
}
.dropdown-menu li span{
  display: inline-block;
  width: 100%;
   vertical-align: middle;
}
#el_1 span{
  background: #000;
  height: 2px;
}
#el_2 span{
  background: #000;
  height: 4px;
}
#el_3 span{
  background: #000;
  height: 6px;
}
#el_4 span{
  background: #000;
  height: 8px;
}
.dropdown-menu li:hover{
  background: #CEE5FC;
  border: 1px solid #9BC2E8;
}
.active{
  background: #CEE5FC;
  border: 1px solid #9BC2E8;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-block btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span>

  </button>
  <ul class="dropdown-menu" aria-labelledby="markerSizeChange" id="markerSizeList">
    <li id='el_1'>
      <span></span>
    </li>
    <li id='el_2'>
      <span></span>
    </li>
    <li id='el_3'>
      <span></span>
    </li>
    <li id='el_4'>
      <span></span>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

默认情况下，HTML不允许您设置选择框的选项样式。您将需要一个框架来替换普通的HTML选择。

Answer 3

<ul class="dropdown-menu" aria-labelledby="markerSizeChange" id="markerSizeList" style="left:390px;background-color: white !important;">
                            <li style="margin-top: 5px;margin-bottom: 5px;"><hr style="height:1px;border:none;color:#333;background-color:#333;" /></li>
                            <li style="margin-top: 5px;margin-bottom: 5px;"><hr style="height:2px;border:none;color:#333;background-color:#333;" /></li>
                            <li style="margin-top: 5px;margin-bottom: 5px;"><hr style="height:4px;border:none;color:#333;background-color:#333;" /></li>
                            <li style="margin-top: 5px;margin-bottom: 5px;"><hr style="height:6px;border:none;color:#333;background-color:#333;" /></li>
                        </ul>

只需在我的代码中更改hr的高度以适合原件。

在boostrap下拉列表中放置标记大小的水平线

3 个答案: