主页 / 问题 / 668475
Accepted
Byulent
Asked:2020-05-20 21:28:07 +0000 UTC2020-05-20 21:28:07 +0000 UTC

如何将按钮与字段对齐在同一行？

  • 772

表单代码：

div {
  font-size: 12px;
  font-family: Arial, sans-serif;
}

#block-search {
  float: right;
  margin: 7px 10px;
}

#block-search input[type="text"] {
  background: #f4f4ec;
  border: #dfdfdf 1px solid;
}

#block-search input[type="submit"] {
  background: #ce3c00;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  font-family: Arial, sans-serif;
  border: #ba4f23 1px solid;
  height: 21px;
}
<div id="block-search">
  <form>
    Search:
    <input type="text" size="10">
    <input type="submit" value="search">
  </form>
</div>

这是它现在的样子：按钮

我需要按钮与输入字段位于同一行。尝试了各种组合margin，padding但没有任何效果。如果使用 flex，则元素之间的所有水平缩进都将丢失。

html

1 个回答

  1. Best Answer

    重置标准缩进和插入 + 垂直对齐

    div {
  font-size: 12px;
  font-family: Arial, sans-serif;
}

#block-search {
  /*float: right;*/
  margin: 7px 10px;
}
  
#block-search form{
  vertical-align:middle;
}

#block-search input[type="text"] {
  background: #f4f4ec;
  border: #dfdfdf 1px solid;
  margin:0;
  padding:0;
  display:inline-block;
}

#block-search input[type="submit"] {
  background: #ce3c00;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 12px;
  font-family: Arial, sans-serif;
  border: #ba4f23 1px solid;
  height: 21px;
  margin:0;
  padding:0;
  display:inline-block;
}
    <div id="block-search">
  <form>
    Search:
    <input type="text" size="10">
    <input type="submit" value="search">
  </form>
</div>

    • 1

相关问题