Question

我用jQuery创建了一个待办事项列表（参见CodePen）。我希望“+”按钮与输入框连接，在该输入框中添加待办事项列表项，并且两者的高度相同。

获取匹配按钮需要对填充进行大量试验和错误。即使将其设置为box-sizing：border-box，将其高度设置为1.5em以匹配输入框也不起作用。

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

以下是相关的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>

如果您想自己实现它，您需要将输入和按钮放在表单中。要将它们的高度设置为相等，您可以将按钮的高度设置为等于输入的高度输入（1.6 em）+填充（1px顶部+ 1px底部= 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>

Answer 2

将输入的宽度减少1 em。并设置按钮向右浮动，它应该工作。

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

2 个答案: