Почему элемент формы заставляет мой 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>

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>