Question

我希望在一行中的<div>标记内显示三个不同的元素，并具有完整的响应行为。三个元素是，（i）：font-awesome图标用户，（ii）：标签文本和（iii）：hr标签。我正在使用bootstrap。

这是我的HTML，

<div class="panel-collapse collapse" role="tabpanel">
    <div class="panel-body">
        <form class="form">
            <div class="row traveller-divider">
                <div class="inline-block">
                    <span class="fa fa-user"></span>
                    <label>Traveller</label>
                </div>
                <hr>
            </div>
        </form>
    </div>
</div>

我尝试过使用CSS但它不起作用。任何帮助都会很棒。谢谢。

Answer 1

使用CSS定位。制作.traveller-divider - 相对＆amp; make hr - 绝对。

请查看下面的代码段以便更好地理解：

.traveller-divider {
  position: relative;
}

.inline-block {
  display: inline-block;
  padding: 5px 10px;
  background: white;
  position: relative;
  z-index: 2;
}

hr {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  z-index: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="panel-collapse collapse" role="tabpanel">
    <div class="panel-body">
        <form class="form">
            <div class="row traveller-divider">
                <div class="inline-block">
                    <span class="fa fa-user"></span>
                    <label>Traveller</label>
                </div>
                <hr>
            </div>
        </form>
    </div>
</div>

希望这有帮助！

Answer 2

<div class="row divider">
     <label>User <span class="fa fa-user"></span></label>
     <hr>
</div>

不确定这是否是您尝试实现的目标？

Answer 3

如果您希望hr位于图标和标签的一侧，则需要相对放置它，并为图标和标签指定背景颜色（与包含div的颜色相同）。否则，您必须使用float来定位hr并为其指定一个定义的宽度，这将无法响应。

鉴于你的HTML，这就是我要做的事情：

.fa, label { 
   display: block; 
   background: #fff; 
   float: left; 
} 

hr {position: relative; top: -0.5em; z-index: -1; clear: both; }

您必须调整hr的top位置以匹配您想要的位置。

这是一支工作笔：http://codepen.io/vic3685/pen/GNqeQQ

使用font-awesome图标和文本一起显示带有响应行为的<hr />标记

3 个答案: