CSS显示：内联覆盖内部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

您不应为此使用段落元素，因为它是一个块元素。块元素总是导致换行。