Заполнение промежутка FLOAT с помощью точек или подчеркиваний - PullRequest
Новая
       0

Заполнение промежутка FLOAT с помощью точек или подчеркиваний

0 голосов
/ 06 февраля 2020

Я использую <span>, чтобы выровнять влево-вправо некоторые элементы следующим образом - аналогично \hfill в LaTeX. 

<!doctype html>
<html>
<div style="width:1024px;margin:auto">
HELLO<span style="float:right">WORLD</span>
</div>
</html>

Это оставляет белый пробел между HELLO и WORLD. Можно ли заполнить этот пробел точками или подчеркиванием - аналогично \dotfill или \hfill в LaTeX?

Прежде чем заполнить только пробел, я сначала попытался подчеркнуть всю деталь, используя <u> таким образом. 

<u>HELLO<span style="float:right">WORLD</span></u>

Этот способ не продолжался после HELLO в начале , Если <u> применяется внутри <span>, то этот <u> только подчеркивает инкапсулированный WORLD в конце. Интересно, можно ли применить <u> к белому промежутку без повторения &nbsp;.

1 Ответ

0 голосов
/ 06 февраля 2020

Я бы использовал flexbox вместо float, а затем псевдоэлемент с повторяющимся градиентом в подходящем стиле в качестве «линии». 

:root {
  --h: 2px;
  --w: 10px;
  --c: black;
}

div {
  display: flex;
  width: 80%;
  margin: 1em auto;
  justify-content: space-between;
}

span {
  flex: 1;
  display: flex;
  align-items: center;
}

span:before {
  content: "";
  flex: 1;
  margin: 0 .25em;
  height: var(--h);
  background-image: linear-gradient(90deg, var(--c), var(--c) 75%, transparent 75%, transparent 100%);
  background-size: var(--w) var(--h);
}

.red {
  --c: red;
  --h: 3px;
  --w: 20px;
}
<div>
  HELLO<span>WORLD</span>
</div>

<div>
  GOODBYE<span class="red">CRUEL WORLD</span>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...