CSS Display: встроенный переопределяет внутренние div

Question

У меня есть этот макет HTML:

<div class = "inline">
		<div class ="not-inline">
      		<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      		<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  		</div>
        <div class ="not-inline">
      		<input type="radio" name="option" value="isbn"> <p> ISBN </p>
      		<input type="radio" name="option" value="title"> <p> Title </p>
      		<input type="radio" name="option" value="author"> <p> Author </p>
      		<input type="radio" name="option" value="year"><p> Year </p>
  		</div>
  	</div>

и я ожидал, что поисковик и кнопка будут в одной строке, а затем под ними 4 опции радио, также в одной строке, но то, что я получаю, это строка поиска и кнопка в порядке, одна и та же строка, но все опции радио расположены друг над другом, как на фото. Почему это происходит?

Ура!

Answer 1

<p> теги создают разрывы строк.Удалите их, и они появятся в одной строке.

<div class = "inline">
  <div class ="not-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
  <div class ="not-inline">
    <input type="radio" name="option" value="isbn">ISBN
    <input type="radio" name="option" value="title">Title
    <input type="radio" name="option" value="author">Author
    <input type="radio" name="option" value="year">Year
  </div>
</div>

Answer 2

Вы не должны использовать элемент абзаца для этого, потому что это блочный элемент. Элемент блока всегда вызывает новую строку.