html - 使按钮大小与相邻的输入框匹配

Question

我用 jQuery 创建了一个待办事项列表(参见 CodePen)。我希望将“+”按钮与您在其中添加待办事项列表项的输入框连接起来，并使两者具有相同的高度。

让按钮匹配需要大量的填充试验和错误。将其高度设置为 1.5em 以匹配输入框并没有用，即使在将其设置为 box-sizing: border-box 之后也是如此。

是否有更有效、更准确的方法来实现这一目标？

这是相关的 CSS:

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 28.23em;
  color: #666;
  height: 1.5em;
}

.button {
  /* Needed to display button next to input box */
  display: inline-block;
  vertical-align: bottom;
  box-shadow: inset 0px 1px 0 0 #fff;
  /* Starts at top, transitions from left to right */
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  font-size: 0.7em;
  font-weight: bold;
  /* First value sets top and bottom padding; second value sets right and left */
  padding: 0.53em 0.7em;
  text-shadow: 0 1px #fff;
  text-align: center;
  color: grey;
}

和 HTML:

<form name="listForm">
  <input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>

Answer 1

如果您使用的是 bootstrap，则可以使用输入组实现此目的，请参阅:Bootstrap 4 input groups

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">+</button>
  </div>
</div>

如果要自己实现，需要把input和button放在form里面。要将它们的高度设置为相等，您可以将按钮的高度设置为等于输入高度 (1.6 em) + 输入的填充 (1px top + 1px bottom = 2px):

input[type="text"] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 28.23em;
  color: #666;
}

button.button {
    margin-left: -30px;
    height: -webkit-calc(1.6em + 2px);
    height: calc(1.6em + 2px);
    width:25px;
    color: grey;
    border:none;
}

<form name="listForm">
  <input type="text" name="listItem" placeholder="Add new">
  <button class="button">+</button>
</form>