Question

我有相同的css属性，但按钮和输入字段是不同的字段

.input-con {
  position: relative;
}

.input-con>* {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 0;
  background-color: #ddd;
  color: #444;
  outline: 0;
  cursor: pointer;
  font-size: 15px;
  box-sizing: border-box;
}

<div class="input-con">
  <input type="text" />
  <button>Search</button>
</div>

笔 - https://codepen.io/digitalzoomstudio/pen/LOoVYK

如果不强制 height 属性，我怎样才能达到相同的高度？

Answer 1

您可以使用弹性框，只需在父级上添加display:flex;（ input-con ）

.input-con {
  position: relative;
  display:flex;
}

.input-con>* {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 0;
  background-color: #ddd;
  color: #444;
  outline: 0;
  cursor: pointer;
  font-size: 15px;
  box-sizing: border-box;
  margin-right:2px;
}

<div class="input-con">
  <input type="text" />
  <button>Search</button>
</div>

Answer 2

您认为高度存在差异的原因是 - 我认为 - 属于font属性，其中包括font-weight，font-size和font-family的简写。

如果您明确覆盖input和button的此属性，则高度将匹配。

.input-con {
  position: relative;
}

.input-con>* {
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 0;
  background-color: #ddd;
  color: #444;
  outline: 0;
  cursor: pointer;
  font-size: 15px;
  box-sizing: border-box;
}

input,
button {
  font: 400 15px Arial !important;
}

<div class="input-con">
  <input type="text" />
  <button>Search</button>
</div>

根据评论更新

分别声明font-weight，font-size和font-family是行不通的，因为这不会完全覆盖font速记。

完整的速记是：

font: font-style font-variant font-weight font-size/line-height font-family;

仅当声明这些属性的每个时，才会覆盖font属性。

请注意，font包含font-variant的三个单独属性（连字，大写和数字） - 似乎使用font-variant就足够了。

<强>演示

.input-con {
  position: relative;
}

.input-con>* {

  /* override all properties of the 'font' shorthand */
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  font-family: Arial, sans-serif;
  
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 0;
  background-color: #ddd;
  color: #444;
  outline: 0;
  cursor: pointer;
  box-sizing: border-box;
}

<div class="input-con">
  <input type="text" />
  <button>Search</button>
</div>

Answer 3

您添加了line-height: 1;，这有所不同

.input-con {
  position: relative;
}

.input-con>* {
  /*line-height: 1;*/
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 0;
  background-color: #ddd;
  color: #444;
  outline: 0;
  cursor: pointer;
  font-size: 15px;
  box-sizing: border-box;
}

<div class="input-con">
  <input type="text" />
  <button>Search</button>
  <input type="text" />
</div>

Answer 4

尝试这可能有帮助

.input-con {
    position: relative;

    }
.input-con{
  position:relative;

  >*{
    vertical-align:middle;  
    padding: 10px; 
    border:0;
    background-color: #ddd;
    color: #444;
    outline:0;
    cursor:pointer;
    font-size: 15px;  

  }
}

Answer 5

只需添加display：flex就像这样

    .input-con {
    position: relative;
    display:flex;
    }

详细了解flex

Answer 6

确实，Flexbox是可行的方式，但如果您对此感到好奇，那么CSS Tricks会有一篇好文章https://css-tricks.com/fighting-the-space-between-inline-block-elements/

输入和按钮，相同的CSS，不同的高度

6 个答案: