输入上方标签放置的正确代码是什么？

Question

使标签“自定义名称”显示在输入字段上方而不是旁边所需的正确代码是什么（请参见下图了解其当前外观）。我猜它在底部的样式代码中，但不确定这样做需要做什么。如有任何帮助，我们将不胜感激！

<p class="line-item-property__field">
<label  for="">Custom Name</label>
<input required id="monogram" style="width:200px; max-width:100%;" type="text" name="properties[Monogram]">
</p>

<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>

Image for reference

Answer 1

使用flexbox.

.line-item-property__field {
  display: flex;
  flex-direction: column;
}

.ep_inline_block {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.ep_block {
  display: block;
  margin-top: 10px;
  margin-bottom: 2px;
}

input {
  width: 200px;
  max-width: 100%;
}

<p class="line-item-property__field">
  <label for="monogram">Custom Name</label>
  <input required id="monogram" type="text" name="properties[Monogram]">
</p>

输入上方标签放置的正确代码是什么？

What is the correct code for label placement above an input?

html

css

liquid

shopify