Как оформить ввод даты в виде абзаца?

Question

Я сделал небольшое приложение-календарь, в которое можно добавлять события с начальной датой и настройками повтора. Так что это может происходить ежедневно, еженедельно или ежемесячно. В этом фрагменте вы можете увидеть текст, если вы выбрали ежедневное повторение.

Теперь я задаюсь вопросом, возможно ли стилизовать поле даты как обычный абзац, в котором все еще есть выпадающий список. Как я могу это сделать?

function rrendClose() {
    document.getElementById('dailyText').innerText = "Takes place every day.";
    document.getElementById('dailyEnddate').style.visibility = "collapse";
    document.getElementById('dailyDismiss').style.visibility = "collapse";
    document.getElementById('showFullDaily').style.visibility = "visible";
  }

  function rrendOpen() {
    document.getElementById('dailyText').innerText = "Takes place every day, until";
    document.getElementById('dailyEnddate').style.visibility = "visible";
    document.getElementById('dailyDismiss').style.visibility = "visible";
    document.getElementById('showFullDaily').style.visibility = "collapse";
  }

<div class="row">
    <p class="pt-1"><p class="ml-3" id="dailyText">Takes place evry day, until</p>
    <a id="showFullDaily" class="link" onclick="rrendOpen();" style="visibility: collapse;" >Add enddate</a>
    <input name="rrend" class="col-5 form-control border border-dark auto-date" type="date" id="dailyEnddate" value="{{date("d.m.Y")}}">
    <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();">
        <span aria-hidden="true">&times;</span>
    </button></p>
</div>

Answer 1

Некоторые изменения:

• Удалите стили, связанные с текстовым полем (в частности, границы и отступы), а затем заставьте его «наследовать» стили шрифта.
• showFullDaily был переключениспользовать свойство display вместо visibility, поскольку последнее, хотя и скрывает элемент видимым образом, оставляет место там, где должен быть текст, а отображение - нет.
• dailyText было изменено с p тег span, потому что 1) теги p не должны быть вложены друг в друга, а 2) span является встроенным элементом, поэтому он естественным образом продолжает поток без дополнительных стилей. Все эти изменения вместе позволяют элементу ввода сворачиваться и перемещаться вместе с абзацем.

function rrendClose() {
    document.getElementById('dailyText').innerText = "Takes place every day.";
    document.getElementById('dailyEnddate').style.visibility = "collapse";
    document.getElementById('dailyDismiss').style.visibility = "collapse";
    document.getElementById('showFullDaily').style.display = "block";
  }

  function rrendOpen() {
    document.getElementById('dailyText').innerText = "Takes place every day, until";
    document.getElementById('dailyEnddate').style.visibility = "visible";
    document.getElementById('dailyDismiss').style.visibility = "visible";
    document.getElementById('showFullDaily').style.display = "none";
  }

#dailyEnddate {
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

<div class="row">
    <p class="pt-1"><span class="ml-3" id="dailyText">Takes place evry day, until</span>
    <a id="showFullDaily" class="link" onclick="rrendOpen();" style="display: none;" >Add enddate</a>
    <input name="rrend" class="col-5 form-control border border-dark auto-date" type="date" id="dailyEnddate" value="{{date("d.m.Y")}}">
    <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();">
        <span aria-hidden="true">&times;</span>
    </button></p>
</div>

Answer 2

Перейдите в CSS и введите:

.row {

display: flex

}