Question

我有这个小提琴，我要做的是在调整窗口大小时分别将线条直接放在h1的左侧和右侧，并分别缩放。所以它应该看起来像这样。

----This that this
    Here we go-----

我附上了小提琴。我试过将div左移并使其绝对，但我没有运气。我只留下了一个红色条形的div，并删除了另一个。一旦学会做一个，我就可以做另一个。任何帮助表示赞赏。

HTML

    <h1 class="mainPageTopText">
      Find this that this.
      <div class="banner-bottom"></div>
    </h1>

    <h1 class="mainPageBottomText">
      Here we go.
    </h1>
  </div>
</div>

CSS

.mainPageWriting {
  display: flex;
}

.mainPageTopText {
  width: 500px;
  position: absolute;
  margin-right: 400px;
  margin-top: 50px;
  z-index: 12;
  font-family: 'Luxim';
  background: rgba(255, 255, 255, 1.0);
  color: black;
}

.banner-bottom {
  height: 10px;
  width: 100%;
  left: 0;
  position: absolute;
  background-color: red;
  z-index: 100;
}

.mainPageBottomText {
  position: absolute;
  margin-top: 100px;
  padding-left: 100px;
  z-index: 12;
  font-family: 'Luxim';
  background: rgba(255, 255, 255, 1.0);
  color: black;
}

.centered {
  background: #1D2731;
  display: flex;
  align-items: left;
  justify-content: center;
  height: 100%;
}

.banner-bottom {
  height: 10px;
  width: 100%;
  left: 0;
  position: absolute;
  background-color: red;
  z-index: 100;
}

小提琴 https://jsfiddle.net/angatvir/aujrkpLk/183/

Answer 1

看起来很简单，您可以为此使用psudo元素。

.mainPageTopText::before,
.mainPageTopText::after {
content: '----';
display:inline;
}

   <h1 class="mainPageTopText">
      Find this that this.
      Here we go.
    </h1>

Answer 2

像这样更新您的CSS和HTML HTML

    <div class="centered">
        <div class="mainPageWriting">

          <h1 class="mainPageTopText">
            <div class="left-line"></div>
            Find this that this.

          </h1>

          <h1 class="mainPageBottomText">
            Here we go.
            <div class="right-line"></div>
          </h1>
        </div>
        </div>

css

        .centered {
        background: #1D2731;
        display: flex;
        align-items: left;
        justify-content: center;
        height: 100%;
      }



      .mainPageWriting{
        padding:50px 100px;
      }

      .mainPageTopText {
        width: auto;
        position: relative;
        /* margin-right: 400px; */
        margin-top: 50px;
        z-index: 12;
        text-align: left;
        margin: 0px;
        font-family: 'Luxim';
        padding-left: 50px;
        padding-right: 50px;
        background: rgba(255, 255, 255, 1.0);
        color: black;
    }

    h1 .left-line {
        content: "";
        position: absolute;
        width: 40px;
        height: 2px;
        background: #000;
        top: 17px;
        left: 0px;
    }

    .mainPageBottomText {
        position: relative;
        /* margin-top: 100px; */
        /* padding-left: 100px; */
        text-align: right;
        z-index: 12;
        margin: 0px;
        padding-left: 50px;
        padding-right: 50px;
        font-family: 'Luxim';
        background: rgba(255, 255, 255, 1.0);
        color: black;
    }

    h1 .right-line {
        content: "";
        position: absolute;
        width: 40px;
        height: 2px;
        background: #000;
        top: 17px;
        right: 0px;
    }

Answer 3

使用:before和:after，并在content中设置行的样式，也可以为其设置样式

.mainPageWriting {
    display: flex;
  }

  .mainPageTopText {
    width: 500px;
    position: absolute;
    margin-right: 400px;
    margin-top: 50px;
    z-index: 12;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }

.mainPageTopText:before{
  content:'----';
}

  .mainPageBottomText {
    position: absolute;
    margin-top: 100px;
    padding-left: 50px;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }
  .mainPageBottomText:after{
    content:'-----';
  }
    .centered {
    background: #1D2731;
    display: flex;
    align-items: left;
    justify-content: center;
    height: 100%;
  }
  
    .banner-bottom {
    height: 10px;
    width: 100%;
    left: 0;
    position: absolute;
    background-color: red;
    z-index: 100;
  }

<div class="centered">
<div class="mainPageWriting">

  <h1 class="mainPageTopText">
    Find this that this.
  </h1>
  
  <h1 class="mainPageBottomText">
    Here we go.
  </h1>
</div>
</div>

Answer 4

我希望这是您要寻找的答案

基于

----This that this
    Here we go-----

不是

----This that this Here we go-----

#special {
}
#first {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "line text .";
}
#first .line {
  grid-area: line;
  height: 5px;
  align-self: center;
  background: red;
}
#first .text {
  grid-area: text;
}
#second {
  display: grid;
  grid-area: text-below;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: ". text line";
}

#second .line {
  grid-area: line;
  height: 5px;
  align-self: center;
  background: green;
}
#second .text {
  grid-area: text;
}

<h1 id="special">
  <span id="first">
  <span class="text">This that this</span>
  <span class="line"></span>
  </span>
  <span id="second">
  <span class="text">Here we go</span>
  <span class="line"></span>
  </span>
</h1>

Answer 5

尝试此代码在下面添加了一些样式。您可以使用伪元素来给线。删除了banner-bottom格。

.mainPageWriting {
    display: flex;
  }

  .mainPageTopText {
    width: 500px;
    position: absolute;
    margin-right: 400px;
    margin-top: 50px;
    z-index: 12;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }
  
  

  .mainPageBottomText {
    position: absolute;
    margin-top: 100px;
    padding-left: 100px;
    z-index: 12;
    font-family: 'Luxim';
    background: rgba(255, 255, 255, 1.0);
    color: black;
  }
  
 
 
 
 /*** add these */
 
 
.mainPageTopText::before{
 content:"";
 position:absolute;
 height:0;
 border:1px dashed;
 width:20%;
 top:0;
 bottom:0;
 left:-25%;
 margin:auto;
}


 
    
.mainPageBottomText::after{
 content:"";
 position:absolute;
 height:0;
 border:1px dashed;
 width:20%;
 top:0;
 bottom:0;
 right:-25%;
 margin:auto;
}

/** add these **/
  
  
    .centered {
    background: #1D2731;
    display: flex;
    align-items: left;
    justify-content: center;
    height: 100%;
  }

<div class="centered">
<div class="mainPageWriting">

  <h1 class="mainPageTopText">
    Find this that this.
  </h1>
  
  <h1 class="mainPageBottomText">
    Here we go.
  </h1>
</div>
</div>

将线放在h1的左右两侧

5 个答案: