如何在HTML中添加如下图所示的线条边框？

你可以通过给表单内容新增外层容器，搭配CSS边框属性实现需求，同时注意你现有代码中所有div的闭合标签都写反了，需要修正为</div>。

实现代码 #

修正后的HTML结构

<div class="form-container">
  <p>Hotel Guest Contact Info</p>
  <div class='form-row'>
    <label>First Name:</label>
    <input type='text' class='input' />
  </div>
  <br>
  <div class='form-row'>
    <label>Last Name:</label>
    <input type='text' class='input' />
  </div>
  <br>
  <div class='form-row'>
    <label>Room Number:</label>
    <input type='text' class='input' />
  </div>
  <br>
</div>

配套CSS样式（可放入页面head的style标签内）

.form-container {
  /* 边框参数可根据需求调整：宽度 样式 颜色 */
  border: 2px solid #222;
  /* 内边距，避免内容紧贴边框 */
  padding: 18px 24px;
  /* 可选：设置容器宽度 */
  width: 450px;
}
.form-row label {
  /* 可选：设置label固定宽度，让输入框对齐更整齐 */
  display: inline-block;
  width: 110px;
}

自定义调整说明 #

• 如果需要虚线边框，把border属性里的solid替换为dashed即可
• 调整边框宽度直接修改2px为对应数值即可
• 修改边框颜色直接替换#222为你需要的色值即可

内容的提问来源于stack exchange，提问作者user16700763