如何创建左对齐外置按钮的输入框？输入框与按钮按3:1适配div宽度

直接用Flex布局就能轻松实现这个需求，代码如下：

HTML 结构 #

<div class="input-group">
  <button class="group-btn">按钮</button>
  <input type="text" class="group-input" placeholder="请输入内容">
</div>

CSS 样式 #

/* 外层容器：设置为flex，宽度100%以适配父元素 */
.input-group {
  display: flex;
  width: 100%;
  gap: 8px; /* 可选：给按钮和输入框加一点间距 */
}

/* 按钮：占总宽度的1/4 */
.group-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

/* 输入框：占总宽度的3/4 */
.group-input {
  flex: 3;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* 确保内边距不影响宽度占比 */
}

关键说明 #

• 用flex: 1和flex: 3直接分配1/4和3/4的宽度占比，Flex布局会自动适配父容器尺寸
• 按钮和输入框是完全独立的DOM元素，不存在内嵌到输入框内部的情况
• box-sizing: border-box能避免内边距、边框撑开元素宽度，保证占比准确
• gap属性可按需调整按钮与输入框的间距，不想留间距直接删掉即可

如果需要兼容不支持Flex的旧浏览器，也可以用浮动方案：

/* 兼容版浮动布局 */
.input-group {
  width: 100%;
  overflow: hidden; /* 清除浮动影响 */
}

.group-btn {
  width: 25%;
  float: left;
  margin-right: 8px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.group-input {
  width: calc(75% - 8px); /* 减去按钮的右侧间距 */
  float: left;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Anjana M.