使用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. ThinkJava-容器深入研究

    第17章 容器深入研究 17.2 填充容器 package com.cy.container; import java.util.*; class StringAddress { private St ...

  2. Makefile | Linux嵌入式编程 使用详细图解

    针对的是对Makefile一点都不会的小白哦! 练习之前我们要做好准备: (1):第一步创建一个目录,因为实验过程中生成的文件会很多,不要把你系统里的文件搞得乱七八糟. [cjj@bogon ~]$ ...

  3. 开发框架-APP:Hybird App

    ylbtech-开发框架-APP:Hybird App Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体 ...

  4. JQUERY dialog的用法详细解析

    本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...

  5. vlc的应用之二:vlc的ActiveX及cab

    请移步https://higoge.github.io/,所有下载资料在那个博客都能找到.谢谢. http://jeremiah.blog.51cto.com/ 2009-05-14补充:8. Act ...

  6. Notepad++ 删除空白行的方法(转)

    Notepad++ 是我特别喜欢的一款编程工具.在安装后就可以轻松使用了.Notepad++ 上提供了很多方便的插件以实现更多的扩展,当然自身已经比较强大好用了.如果你遇到文本中间有大量的空白行的话, ...

  7. xgboost的遗传算法调参

    遗传算法适应度的选择: 机器学习的适应度可以是任何性能指标 —准确度,精确度,召回率,F1分数等等.根据适应度值,我们选择表现最佳的父母(“适者生存”),作为幸存的种群. 交配: 存活下来的群体中的父 ...

  8. python之路_函数实例及装饰器介绍

    一.习题讲解 1.写函数,返回一个扑克牌列表,里面有52项,每一项是一个元组.例如:[(‘红心’,2), (‘草花’,2), …(‘黑桃,‘A’)] def cards(): num=[] for v ...

  9. Solr优化案例分析

    随着umc接入主机的数量越来越多,每天产生的syslog日志数量也在剧增, 之前一天产生的syslog数量才不 到1W,随着整个集团的网络设备不端接入,导致现在每天产生的syslog数量大概在180w ...

  10. 跳表(skiplist)Python实现

    # coding=utf-8 # 跳表的Python实现 import random # 最高层数设置为4 MAX_LEVEL = 4 def randomLevel(): ""& ...