0

введите сюда описание изображенияНикак не могу сделать декоративные линии, идущие от в обе стороны до края экрана

<fieldset>
    <legend>
        Заголовок
    </legend>
    <div>
        <div>
            <label >Email:*</label>
            <input type="email">            
        </div>
        <div>
            <label>телефон:*</label>
            <input type="tel">            
        </div>
        <div>
            <label>Комментарий</label>
            <textarea></textarea>
        </div>
    </div>
</fieldset>

2
  • вы бы хоть картинку приложили, что за линии до края экрана
    – teran
    28 янв 2022 в 10:23
  • Приложил картинку 28 янв 2022 в 10:32

1 ответ 1

2

fieldset {
  border-color: lightgreen;
  border-width: 3px 0 0 0;
  border-style: solid;
}

legend {
  padding: 0 8px;
  font-family: sans-serif;
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -.05em;
}
<fieldset>
  <legend>
    Заголовок
  </legend>
  <div>
    <div>
      <label>Email:*</label>
      <input type="email">
    </div>
    <div>
      <label>телефон:*</label>
      <input type="tel">
    </div>
    <div>
      <label>Комментарий</label>
      <textarea></textarea>
    </div>
  </div>
</fieldset>

UPD: Хорошо, вот с контейнером...

body {
  min-height: 100vh;
  display: flex;
}

.container {
  margin: auto;
  width: 50%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px #ccc;
  padding: 16px;
}

fieldset {
  border-color: lightgreen;
  border-width: 3px 0 0 0;
  border-style: solid;
}

legend {
  padding: 0 8px;
  font-family: sans-serif;
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -.05em;
}
<div class="container">
  <fieldset>
    <legend>
      Заголовок
    </legend>
    <div>
      <div>
        <label>Email:*</label>
        <input type="email">
      </div>
      <div>
        <label>телефон:*</label>
        <input type="tel">
      </div>
      <div>
        <label>Комментарий</label>
        <textarea></textarea>
      </div>
    </div>
  </fieldset>
</div>

2
  • Извиняюсь, забыл добавить, данный блок ограничен контейнером-центровщиком 28 янв 2022 в 12:38
  • @onstopel_rebel ничего не меняет. добавил код. 28 янв 2022 в 18:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.