Question

我正在制作传单地图，我想通过使用模式来添加传奇。

在我的模态中，我想使用：

<ul><li>

我ul的每个ligne都可以是带文字的水平线或带文字的图标。

例如：

-----(red) : Polyline of users

-----(green) : Polyline of the race

(icon) : marker of users ....

我不知道如何在html / css中绘制红线来做类似的事情。

我已经尝试了<hr>，但总是采取所有行。

感谢您的帮助。我包含了我的模态代码：

<div id="infoModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Informations</h4>
                </div>
                <div class="modal-body">
                    <h2>Legende : </h2>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div class="col-md-4">
                                <hr width="25%" size="10">
                            </div>
                            <div class ="col-md-8">
                                TEST
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

示例（来自评论部分）

Answer 1

您可以使用flexbox和伪元素。

＆＃13;

.list-group-item {} .list-group-item div {
  display: flex;
  align-items: center;
}
.list-group-item div::before {
  content: '';
  flex: 1;
  height: 5px;
  background: red;
  margin-right: 1em;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
  <h2>Legende : </h2>
  <ul class="list-group">
    <li class="list-group-item">
      <div class="col-sm-12">
        <img src="http://lorempixel.com/image_output/abstract-q-c-25-25-2.jpg" alt="">
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

试试这个：

＆＃13;

Function.prototype === Function.__proto__; // true
typeof Function.prototype; // "function"

＆＃13;

.my-divider {
  position: relative;
  left: 100px;
}

.my-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100px;
  width: 100px;
  border-bottom: 1px solid red;
}

＆＃13;

值有点武断，所以改变它们以适应。

Html显示一个图例

2 个答案: