为什么表单元素会使我的div占用更多的空间？

Question

我的网站上有一个菜单栏，我正在尝试添加搜索字段。它已经出现在网站上一段时间了，但是还没有做任何事情。看起来是这样的：

body {
  margin: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.js"></script>

<div class="ui inverted menu">
  <a href="/" class="active item">
                Home
            </a>
  <div class="right item">
    <div class="ui inverted transparent input">
      <input type="text" name="pageName" placeholder="Navigate to...">
    </div>
    <button type="submit" class="ui black button">Go</button> </div>
</div>

我终于要使它起作用，所以我在搜索输入和按钮周围添加了一个表单元素：

body {
  margin: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.js"></script>

<div class="ui inverted menu">
  <a href="/" class="active item">
                Home
            </a>
  <div class="right item">
    <form id="navigateForm" action="/Page/NavigateForm" method="post">
      <div class="ui inverted transparent input">
        <input type="text" name="pageName" placeholder="Navigate to...">
      </div>
      <button type="submit" class="ui black button">Go</button>
    </form>
  </div>
</div>

但是有了form元素，菜单栏要比没有它更高。为什么会这样，我该如何解决？

Answer 1

与其添加表单元素，不如将一个div转换为form。问题是由于在某些CSS规则中使用了>选择器，如果您引入一个额外的元素，该选择器将中断，因此该规则将不再适用，您将获得新的结果。

示例：

body {
  margin: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.js"></script>

<div class="ui inverted menu">
  <a href="/" class="active item">
                Home
            </a>
  <form id="navigateForm" class="right item" action="/Page/NavigateForm" method="post">
      <div class="ui inverted transparent input">
        <input type="text" name="pageName" placeholder="Navigate to...">
      </div>
      <button type="submit" class="ui black button">Go</button>
    </form>
</div>

Answer 2

问题不在于表单，而是按钮类（class =“ ui black button”）
您需要删除其顶部和底部的填充并根据需要对其进行样式设置，有很多方法可以修复

body {
  margin: 14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.5/dist/semantic.min.js"></script>

<div class="ui inverted menu">
  <a href="/" class="active item">
                Home
            </a>
  <div class="right item">
    <form id="navigateForm" action="/Page/NavigateForm" method="post">
      <div class="ui inverted transparent input">
        <input type="text" name="pageName" placeholder="Navigate to...">
      </div>
      <button type="submit" class="" style="background: #000; color:#fff;font-weight:bold;border:none;padding:0px;">Go</button>
    </form>
  </div>
</div>