使用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. sigar在Centos和Windows下使用java系统软硬件配置信息

    背景 本来这个网上一大堆实在没什么想写的,但是好像大多数都是互相抄袭的,在centos根本上用不了,因此我整理下自己具体实现的步骤. 使用环境 sigar版本:hyperic-sigar-1.6.4  ...

  2. 关于后台程序java报错问题解决

    HTTP Status – Internal Server Error Type Exception Report Message Handler processing failed; nested ...

  3. 1092 To Buy or Not to Buy (20 分)

    1092 To Buy or Not to Buy (20 分) Eva would like to make a string of beads with her favorite colors s ...

  4. gearman在虚拟机上运行没有自动开启的处理

    几天来被gearman无响应的问题困扰,后来请教了大神解决.原因是gearman在虚拟机上运行不稳定,无法自动开启,需手动开始,输入图片的两行命令即开始.

  5. Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图

    Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项 ...

  6. 长短时记忆网络(LSTM)

    长短时记忆网络 循环神经网络很难训练的原因导致它的实际应用中很处理长距离的依赖.本文将介绍改进后的循环神经网络:长短时记忆网络(Long Short Term Memory Network, LSTM ...

  7. R语言中的遗传算法详细解析

    前言 人类总是在生活中摸索规律,把规律总结为经验,再把经验传给后人,让后人发现更多的规规律,每一次知识的传递都是一次进化的过程,最终会形成了人类的智慧.自然界规律,让人类适者生存地活了下来,聪明的科学 ...

  8. mac 安装 nginx

    我是用root用户装的 1.先安装PCRE库 可以在这里下载最新版,我这里使用的是8.33的版本然后在终端执行下面的命令. cd ~/Download tar xvzf pcre-8.33.tar.g ...

  9. 使MySQL查询区分大小写的实现方法

    发布:mdxy-dxy 字体:[增加 减小] 类型:转载 我们在MySQL中使用SELECT语句查询时,可不可以使查询区分大小写?今天从网络上找到了方法,现总结如下.   1.一种方法是可以设置表或行 ...

  10. Apache Maven 入门篇

    2017-11-09注释:IntelliJ IDEA 2017.2.5 x64 等新版本会安装maven,为了有好的体验 建议在安装目录找到IntelliJ IDEA 2017.2.5\plugins ...