Подчеркивайте текст рядом с текстом.

Я пытаюсь реализовать следующее:

Вы увидите, что есть текст, а затем строка на его стороне. Я пытаюсь, чтобы линия оставалась на том же расстоянии от текста, что и размер экрана. Это работает нормально, но когда экран становится меньше, линия переходит в часть "Test Border".

См. приведенный ниже код о том, как я это сделал. Возможно, я должен придерживаться другого подхода.

Кроме того, jsfiddle здесь для вашего удобства.

h3 {
  font-size: 26px;
  color: #000 !important;
  max-width: 90px;
  display: inline-block;
  padding-bottom: 15px;
  width: 8%;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: 90%;
}

<h3>Test Border</h3>
<div class="underline"></div>

Ответы

Ответ 1

Вы можете отображать оба блока в виде таблицы и задавать фиксированную ширину первого блока (так как это только текст, который не изменяется).

.wrapper {
  display: table;
  width: 100%;
  vertical-align: bottom;
  padding-bottom: 15px;
  table-layout: fixed;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  max-width: 90px;
  display: table-cell;
  width: 85px;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6;
  width: 100%;
  position: relative;
  top: -12px;
}

<div class="wrapper">
  <h3>Test Border</h3>
  <div class="underline"></div>
</div>

Ответ 2

Я бы, вероятно, использовал flex-блок, как это.

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 10px;
  transform: translate(0, -6px);
}

<div class="border">
  <span class="string">Test String</span>
  <div class="line"></div>
</div>

Ответ 3

Я думаю, что лучшим решением является изменение разметки, потому что с вашим кодом текст в теге h3 может быть больше вашей максимальной ширины (на самом деле, это так). Что-то вроде этого:

.textline {
  display: table;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  display: table-cell;
  width: 9%;
  margin-right: 1%;
  vertical-align: bottom;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6;
  width: 90%;
  position: relative;
  top: -7px;
}

<div class="textline">
  <h3>Test border</h3>
  <div class="underline"></div>
</div>

Ответ 4

Вы можете попробовать свойство calc(), и оно будет работать...

Проверьте здесь эту скрипку

Что вам нужно сделать,

h3 {
    font-size: 26px;
    display: inline-block;
    max-width:90px;
    margin-right:10px;
}

.underline {
    display: inline-block;
    border-bottom: 1px solid #c6bcb6;
    width: calc(100% - 104px);
}

Ответ 5

Когда вы используете проценты, вы должны учитывать фиксированные меры других элементов, ширину, поля, границы... Не то же самое 90% экрана 1000 пикселей, что один из 500 пикселей, а оставшееся пространство меньше. Вы можете использовать calc для решения этих проблем:

h3 {
  font-size: 26px;
  color: #000 !important;
  width: 95px;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: calc(100% - 100px);
}

<h3>Test Border</h3>
<div class="underline"></div>

Ответ 6

Попробуйте использовать CSS:

h3 {
  font-size: 26px;
  color: #000 !important;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  border-bottom: 1px solid #C6BCB6;
  width: 90%;
}

Ответ 7

Вы можете попробовать использовать табличный дисплей с текстом и строкой, каждая из которых имеет свою собственную ячейку:

<div class="div-row">
    <div class="div-cell"><h3>Test Border</h3></div>
    <div class="div-cell underline"></div>
<div>

CSS

.div-row  {
    display: table-row;
    width: 100%;
}

.div-cell {
    display: table-cell;
}

Я не тестировал это, но div, содержащий строку, должен автоматически уменьшаться до доступной ширины, поскольку вы изменяете размер окна браузера (или, как вы переходите с рабочего стола на мобильный).

Если вы хотите, вы также можете установить фиксированную ширину в div, содержащий текст.