Question

如何将<h2>元素与input字段和button对齐？标题始终浮在搜索字段上方

＆＃13;

#header {
	background-color: grey;
	display: inline-block;
	width: 100%;
	padding: 2px 5px 2px 5px;
}

＆＃13;

<html>
  <header id="header">
	  <h2>MovieDB</h2>
	  <input type="text" placeholder="search movie...">
	  <button>search</button>
  </header>
</html

＆＃13;

Answer 1

h2默认为块级元素，只需将其设为inline或inline-block，例如

在这种情况下，无需将inline-block应用于标题。

#header {
    background-color: grey;
    padding: 2px 5px 2px 5px;
} 

h2, input, button{
  display: inline-block;
}

http://codepen.io/anon/pen/obXrBL

Answer 2

＆＃13;

#header h2{
	background-color: grey;
	display: inline-block;
        width: auto;
	padding: 2px 5px 2px 5px;
}

＆＃13;

<html>
  <header id="header">
	  <h2>MovieDB</h2>
	  <input type="text" placeholder="search movie...">
	  <button>search</button>
  </header>
</html>

＆＃13;

Answer 3

H1 - H6元素是block个元素，因此会在新行上呈现。要更改此设置，请添加CSS以使用inline-block将H2设为display，即

＆＃13;

#header {
	background-color: grey;
	display: inline-block;
	width: 100%;
	padding: 2px 5px 2px 5px;
}

 #header > h2 {
      display: inline-block;
 }

＆＃13;

<html>
  <header id="header">
	  <h2>MovieDB</h2>
	  <input type="text" placeholder="search movie...">
	  <button>search</button>
  </header>
</html

＆＃13;

您可以找到更多here

标题内联元素的问题

3 个答案: