Question

我想知道如何使用CSS实现可调整的水平线。

HTML

<div class="col-12 d-flex justify-content-around title">
    <span style=" flex-shrink: 3;"  class="align-self-center"></span>
    <h5> content here </h5>
    <span style=" flex-shrink: 3;" class="align-self-center"></span>
</div>

CSS

.title span {
    height: 1px;
    background: rgba(255,255,255,0.3);
    width: 33%;
}

当内容很短时，它看起来非常完美。

但是，如果内容太长。它会像这样混乱。有没有办法用CSS制作可调线？

由于

Answer 1

这里有一个使用flexbox和伪类的简单方法 - 没有技巧，只有容器内的一个元素。

＆＃13;

             <enumtype code="DaysOfWeek" autocreate="true" generate="true">
                        <value code="Monday" />
                        <value code="Tuesday" />
          </enumtype>

         <attribute qualifier="daysOfWeek" type="DaysOfWeek">
                <persistence type="property" />
      </attribute>

＆＃13;

div {
  display: flex;
  align-items: center; /* vertically center lines */
}

div::before,
div::after {
  content: '';
  flex: 1; /* expand lines as much as possible */
  background: #ccc;
  height: 2px;
}

span {
  padding: 0 1em; /* slight padding between line and text */
}

＆＃13;

Answer 2

这会帮助你。请注意，元素background-color的{{1}}应与页面背景相同

JSFiddle： here

＆＃13;

h5

＆＃13;

.title span {
    height: 1px;
    background: rgba(255,255,255,0.3);
    width: 33%;
}
hr{
  margin:60px 0px;
  width:100%;
}
h5{
  position:absolute;
  margin:0px auto;
  background-color:white;
  padding: 20px 30px;
  font-size:20px;
}
.vcenter{
  display:flex;
  align-items:center;
  justify-content: center;
}

＆＃13;

如果您希望文本仅扩展到某个限制并且文本应居中，请查看以下示例。

＆＃13;

<div class="vcenter">
  <hr>
  <h5> content here which is like very long and cant handle it </h5>
</div>

＆＃13;

.title span {
    height: 1px;
    background: rgba(255,255,255,0.3);
    width: 33%;
}
hr{
  margin:60px 0px;
  width:100%;
}
h5{
  position:absolute;
  max-width:300px;
  text-align:center;
  margin:0px auto;
  background-color:white;
      padding: 3% 5%;
  font-size:20px;
  max-width:300px; 
}
.vcenter{
  display:flex;
  align-items:center;
  justify-content: center;
}

＆＃13;

带CSS的可调节水平线。

2 个答案: