如何在HTML中对齐文本框内的文本？附代码及预期效果

根据你提供的代码和预期效果，我们可以通过CSS Flexbox快速实现目标布局：

步骤1：修正HTML结构 #

先修复原代码中重复的class属性，调整结构让前两个输入框处于同一容器内，方便布局控制：

<div class="textbox-container">
  <div class="top-row">
    <div class="image">
      <img src="wwwroot/image/{{ data.Icon }}" alt="{{data.Id}}" />
    </div>
    <div class="input-group">
      <input id="item" type="text" value="CornFlower">
      <input id="variety" type="text" value="Floral ">
    </div>
  </div>
  <input id="botanical" type="text" value="Centaurea ">
</div>

步骤2：添加CSS样式 #

用Flexbox控制整体对齐，确保图片和输入框垂直居中，第三个输入框与上方内容左对齐：

.textbox-container {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 控制上下行的间距 */
}

.top-row {
  display: flex;
  align-items: center; /* 图片和输入框垂直居中对齐 */
  gap: 12px; /* 图片与输入框之间的间距 */
}

.input-group {
  display: flex;
  gap: 12px; /* 前两个输入框之间的间距 */
}

.textbox-container input {
  padding: 6px 8px;
  box-sizing: border-box;
}

.image img {
  /* 根据实际需求设置图片尺寸 */
  width: 40px;
  height: 40px;
  object-fit: cover;
}

额外调整：文本内容对齐 #

如果需要让输入框内的文本对齐（比如右对齐），只需给输入框添加对应样式：

.textbox-container input {
  /* 保留原有样式 */
  text-align: right;
}

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