Question

这是我要修复的结果：

如您所见，带有百分比符号的范围正在扩展以适合输入上的边距。我该如何预防？我尝试了多个css属性，但似乎无法打破采用输入多余边距的范围。

这是使用Hubspot CMS创建的，我不得不尝试在我的常规网站上重新创建引导样式。

这是标记：

<div class="row">
          <div class="col-sm-6">
            <label for="monthly-traffic" class="control-label">Monthly traffic (unique visitors)</label>
            <input class="form-control" type="number" name="monthly-traffic" id="monthly-traffic" class="form-control" placeholder="monthly traffic">
          </div>
          <div class="col-sm-6">
            <label for="percent-us" class="control-label">Percent of traffic from US</label>
            <div class="input-group">
              <input id="percent-us-addon" class="form-control" type="number" name="percent-us" placeholder="US traffic percentage" aria-describedby="percent-us-addon">
              <span class="input-group-addon">%</span>
            </div>
          </div>
        </div>

和CSS用于：

col-sm-6: {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}


input-group: {
  border-left: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  position: relative;
  display: table;
  border-collapse: separate;
}
form-control: {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  vertical-align: middle;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; 
}

和

input-group-addon:{
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #e2e2e2;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
}

Answer 1

您的标记缺少.input-group包装程序和适当的附加程序类（.input-group-append和.input-group-text）。

有了这个标记，您根本不需要任何自定义CSS：

  <label for="percent-us" class="control-label">Percent of traffic from US</label>
  <div class="input-group">
    <input id="percent-us-addon" class="form-control" type="number" name="percent-us" placeholder="US traffic percentage" aria-describedby="percent-us-addon">
    <div class="input-group-append">
      <span class="input-group-text">%</span>
    </div>
  </div>

完整的密码笔@ https://codepen.io/cfxd/pen/ywbjxZ

如何配置CSS，使跨度的高度与相邻输入的高度（Hubspot）匹配？

1 个答案: