css将项目放在div类中

Question

我想：

                    block

           block1  block2 block2

其中

block ="head"
block1="h1"
block2="search box"
block3="itembox"

我想把它们放在一起.. 我在jsfiddle中试过下面的代码：

jsfiddle

但是这些块不在同一条线上。

Answer 1

请勿使用 head 标记使用header

试试这个

 #search {
    display: inline-block;
 }

http://jsfiddle.net/dm8044a8/2/

Answer 2

该元素可以包含文档的标题，脚本，样式，元信息等。在BODY内部不使用头部。

使用header代替标记。 我不理解<itembox>标签。你使用任何框架吗？我想你想要这样的事情。请根据您的要求更改宽度值。

＆＃13;

＆＃13;

header {
	background: #fff;
	width: 100%;
	height: 76px;
	position: fixed;
    
	top: 0;
	left: 0;
    border-bottom: 2px solid #7e7e7e;
	z-index: 100;
  display:flex;
  
  
}

header h1{
	
	color: #ff0;
	
	background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
    text-align:center;
  flex-direction: column; 
     
    
}





#search {
	float: left;
	
    width: auto;
	height: 40px;
  flex-direction: column; 
    
}

.itembox {
	float: left;
	background:green;
  flex-direction: column; 
}


 #search input {
	background: none repeat scroll 0 0 #fff;
	border: 0 none;
	color: #7F7F7F;
	float: left;
	font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
	height: 20px;
	margin: 0;
	padding: 10px;
	transition: background 0.3s ease-in-out 0s;
	width: 300px;
}

#search button {
	background: url("search.png") no-repeat scroll center center #7eac10;
	cursor: pointer;
	height: 40px;
	text-indent: -99999em;
	transition: background 0.3s ease-in-out 0s;
	width: 40px;
	border: 2px solid #fff;
}

#search button:hover {
	background-color:#000;
}

＆＃13;

<header>
<h1>news </h1>

  <div id="search">
    <form method="post" id="search" action="#">

      <input type="text" class="search" value="Type and hit enter" onblur="if(this.value == '') { this.value = 'Type and hit enter'; }" onfocus="if(this.value == 'Type and hit enter') { this.value = ''; }" name="s">
      <button type="submit" style="display:inline-block;">Submit</button>
    </form>
    <div class="itembox">Item box</div>
  </div>




</header>

＆＃13;

＆＃13;

＆＃13;