使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示。

示例如下:

 <div   class="search_row">
<div class="form-group" style="float:left" > <%-- 通过左浮动使多个div在一行显示--%>
<div class="search_label" >图书名称:</div> <input type="text" class="editText" name="bookName" />
</div>
<div class="form-group" style="float:left" >
<div class="search_label" >出版社:</div> <input type="text" class="editText" name="publisher" />
</div>
<div style="clear:both"></div> <%--清除浮动--%>
</div>

注意:记得清除浮动,不然后续会出现偏差。

效果如下:

css:多个div在同一行显示的更多相关文章

  1. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  2. 如何让两个div在同一行显示?一个float搞定

    最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...

  3. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  4. 两个div在同一行显示

    栅格系统需要引用bootstrap插件 <script src="~/Scripts/BootStrap/bootstrap.js"> </script> ...

  5. CSS+DIV实现文字一行内显示,并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  6. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  7. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  8. 【css flex】将多个<div>放在同一行

    使用style里的flex属性 默认情况下,一个div独占一行 使用css选择器给外层div加上以下flex属性,则该div的子div可以在同一行中显示, .runs-paginator-flex-c ...

  9. 多个div 一行显示的处理方式

    1.方式一: 通过div的float属性,定义宽度,然后定义float属性和width的属性,实现多个div在一行显示: 2.方式二: 通过div的display的属性,至少进行2成div的displ ...

随机推荐

  1. python selenium-9 grid模式

    grid是进行分布式测试的工具,由一个hub主节点和若干个node代理节点组成 1.下载Selenium Standalone Server 下载地址:https://www.seleniumhq.o ...

  2. 【洛谷】P1341 无序字母对(欧拉回路)

    题目 传送门:QWQ 分析 快把欧拉回路忘光了. 欧拉回路大概就是一笔画的问题,可不可以一笔画完全图. 全图有欧拉回路当且仅当全图的奇数度数的点有0或2个. 2个时是一个点是起点,另一个是终点. 本题 ...

  3. Impala源码分析

    问题导读:1.Scheduler任务中Distributed Plan.Scan Range是什么?2.Scheduler基本接口有哪些?3.QuerySchedule这个类如何理解?4.Simple ...

  4. 一种思路,隐藏input标签,通过label关联

    <label class="btn btn-default btn-file">上传图片 <input hidden type="file" ...

  5. CUDA C Programming Guide 在线教程学习笔记 Part 9

    ▶ 协作组,要求 cuda ≥ 9.0,一个简单的例子见 http://www.cnblogs.com/cuancuancuanhao/p/7881093.html ● 灵活调节需要进行通讯的线程组合 ...

  6. Redis 通用操作1

    01, 设置值 => set key value  01.1, 设置值并添加有效期 => set key value ex 秒数 或者 set key value px 毫秒数 01.2, ...

  7. 使用Teleport Ultra批量克隆网站,使用Easy CHM合并生成chm文件

    1.要下载的页面 http://www.howsoftworks.net/javaapi/ 2. 下载Teleport Ultra 3.使用Teleport Ultra批量克隆网站 4.下载Easy ...

  8. Spring MVC 异常处理 - DefaultHandlerExceptionResolver

    对一些特殊的异常进行处理,比如方法类型不匹配, 转换错误.

  9. iOS toll-free bridge

    https://developer.apple.com/library/ios/documentation/CoreFoundation/Conceptual/CFDesignConcepts/Art ...

  10. 从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图

    从底层谈WebGIS 原理设计与实现(四):WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 作者:naaoveGI…    文章来源:naaoveGIS    点击数:1759    更 ...