Question

html怎么让div内的两个标签水平对齐

让输入框和button水平对齐
<div class="search"> <form name="form1" method="post" action="{dede:global.cfg_cmsurl/}/plus/search.php" id="form1"> <input name="q" style="top:100px;" type="text" id="search-keyword" value="站内搜索" onFocus="if(this.value=='站内搜索'){this.value='';}" onblur="if(this.value==''){this.value='站内搜索';}"/> <button type="submit" value="" class="search-submit" style="background-image:url({dede:global.cfg_templets_skin/}/images/dd5.jpg); width:22px; height:22px; "></button> </form>

Answer 1

给输入框和button加上css属性：vertical-align: middle。

DIV元素:是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。

定义

<div> 可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的 组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。

用法

DIV标签应用于 Style Sheet（样式表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class、Style、title、ID 等属性。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

Answer 2

外层嵌套 无序列表li 然后float :left

Answer 3

把<input>和<button>都加上左浮动 float:left;

Answer 4

给输入框和button加上css属性：vertical-align: middle;