搜索、输入、按钮边距和填充

Posted 2023-03-06

【中文标题】搜索、输入、按钮边距和填充

【英文标题】：Search, input, button margin and padding

【发布时间】：2021-03-30 19:21:09

【问题描述】：

我想删除<input> 和<button> 之间的空格。

在 CSS 中，我尝试使用填充：input, button padding : 0px，但没有成功。

<form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" />
    <button type="submit">
      <strong>Search</strong>
    </button>
  </div>
</form>

【问题讨论】：

你在使用任何框架吗？ CSS重置？等等？

可能要删除 makup 中的空间？ :...Angeles" /><button...

你的意思是这样吗？ - ibb.co/s9QLFF6

Tkank 你，是的，我想要那样@sergeykuznetsov。

谢谢@LouysPatriceBessette 没关系，非常感谢，这很简单，但我是初中生，学生。谢谢

【参考方案1】：

您可以添加input-search div 样式display:flex。

<form action="search">
  <div class="input-search" style="display:flex;">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

【讨论】：

我试过了，但空间没有离开我会尝试添加第二个 flexbox 值

没关系，有会员帮助我，感谢您的帮助和抽出时间回复。

【参考方案2】：

margin-left: -1em; 可能吗？

保证金可以是负值...

button
  margin-left: -1em;

<form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>