Question

您好我正在尝试保留此文本框并在同一行中提交按钮。我只想保持右侧的提交按钮，占用宽度和宽度的其余部分，以便被文本字段占用。

我想解决的问题是，我希望这能够很好地响应。因此，当拖动屏幕时，文本字段的宽度会调整。

这是HTML：

<form class="form-inline event-questions">
    <div class="event-questions-field">
      <input class="form-control" placeholder="Ask a question..." style="width: 100%" type="text">
    </div>
    <button class="btn btn-danger question-submit" type="submit" value="Submit">SUBMIT</button>
</form>

CSS：

.event-questions {
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
  padding: 5px;
}

.event-questions .question-submit.btn {
  color: white;
  border-radius: 0px;
  font-weight: bold;
  font-size: 15px;
  height: 35px;
  margin-top: -3px;
  padding: 6px 18px;
}

.event-questions .question-submit.btn .event-questions {
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
  padding: 5px;
}

.event-questions .question-submit.btn .event-questions .event-questions-field {
  width: 89%;
  display: inline-block;
}

Answer 1

你可以向左漂浮两个项目。按钮具有固定宽度（100px），div的宽度用calc计算。以下是calc的一些示例。并非所有浏览器都提供Calc，请查看caniuse.com以查看您的首选浏览器是否受支持。这是我的solution in codepen。

CSS：

.event-questions {
    width: calc(100% - 10px);
    margin-bottom: 5px;
    padding: 5px;
}

.event-questions .question-submit.btn {
    color: white;
    border-radius: 0px;
    font-weight: bold;
    font-size: 15px;
    height: 35px;
    margin-top: -3px;
    padding: 6px 18px;
    float: left;
    width: 100px;
}

.event-questions .event-questions-field {
    float: left;
    /* 100px of button width */
    width: calc(100% - 100px);
}

保持文本字段和按钮内联响应

1 个答案: