为什么表单元素使我的 div 比没有它时占用更多 space？

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>

Answer 2

问题不在于表单，而在于按钮 class (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>

为什么表单元素使我的 div 比没有它时占用更多 space？

Why is a form element making my div take up more space than without it?

html

css

layout

semantic-ui