Разделение текста строкой в ​​одном блоке с помощью CSS и HTML

речь идет о конкретном случае или о функционировании кривых ROC в целом? Если вы застряли в R в проекте кривой ROC, напишите код. Это легче объяснить, когда вы приводите пример.

0
задан Temani Afif 6 April 2019 в 20:50
поделиться

2 ответа

Вы также можете использовать flex-box для выравнивания элементов одного и того же родителя. Я немного изменил вашу HTML-разметку, посмотрите:

.flex-paragraph {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.line-separator {
  border-bottom: 1px dashed #000;
  flex: 1;
}
<div class="row">
  <div class="col-12">
    <p class="flex-paragraph">
      <span>HELLO</span>
      <span class="line-separator"></span>
      <span>6/04/2019</span>
    </p>
    <p> Some text </p>
  </div>
</div>

0
ответ дан Wylkon 6 April 2019 в 20:50
поделиться

Вы можете поместить hello и 6/04/2019 в другой контейнер

Как:


<!-- Css -->

<style>
.mySpan {
    position: relative;
}
.mySpan>span {
    margin: 0 10px; /* This is the distance x 2 b/w the two words */
    position: relative;
}
.mySpan+span {
    content: "";
    position: absolute;
    left:  100%;
    top:  50%;
    transform:  translate(0, -50%) ; /* first parameter can be used for spacing between line and first word */
    width: 20px;
    height:  0;
    border: 1px solid #333; /* line property */
}
</style>


<span class="mySpan"> <span> HELLO </span> <span>  6/04/2019  </span> </span>


0
ответ дан vaibhav kumar 6 April 2019 в 20:50
поделиться