html - 为什么表单元素使我的 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>

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

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>