div宽度设置无效问题解决
问题描述:
要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px。
解决办法:
方法1/给div加入样式:float:left;//向左浮动,宽度设置有效,不能在目标位置显示。
方法2/给div加入样式:display:inline-block;//宽度设置有效,可设置任意位置显示。
原因:
块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性。
而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们就要用inline-block。
inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
代码如下:
<div id="calendar" class="form-group" style="width:260px;display: inline-block;position:relative;top: 26px;">
<div class="input-prepend input-group" style="width: 260px;">
<span class="add-on input-group-addon">
<i class="glyphicon glyphicon-calendar fa fa-calendar"/>
</span>
<input type="text" style="width: 220px" name="collection" id="collectionTime"
class="form-control" value="2015/01/01 - 2015/01/01"
class="span4">
</div>
</div>
<div style="display: inline;position: relative;top: -2px;">
<button ng-click="choose()" class="btn btn-success">筛选</button>
</div>
div宽度设置无效问题解决的更多相关文章
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- table 的宽度设置无效
1.在table 标签添加样式 table-layout: fixed; 必须设置width的值:<table style="table-layout: fixed"> ...
- DIV宽度设置成100%,浏览器窗口缩小后,右边出现留白
解决办法:给body添加min-width属性
- span设置宽度有效无效问题
在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- javascript 中设置window.location.href跳转无效问题解决办法
javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在wi ...
- SuperSlide轮播插件滚动高度或宽度不对的问题解决
声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...
- CSS布局与定位——height百分比设置无效/背景色不显示
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...
- 前端面试题CSS-div宽度设置为100%,设置属性margin-left和margin-right时出现的问题
前端面试题CSS-div宽度设置为100%,设置属性margin-left和margin-right时出现的问题 div格式如下 <div class="a"> < ...
随机推荐
- hadoo namenode format 异常 java.net.UnknownHostException: localhost.localdomain: localhost.localdomain
/etc/sysconfig/network换成你在hosts里设置的值 /etc/rc.d/init.d/network restart 重启网络 hostname后就会发现hostname变了,也 ...
- The xor-longest Path
The xor-longest Path Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 3875 Accepted: 8 ...
- 【Tools】Chrome 控制台不完全指南
Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「 ...
- 我是如何学习NodeJs
实际上在开始的时候我已经对NodeJS有了一定的了解. 比如我知道它是居于Javascript语言的服务器端web Server,比如我知道它的优势在于它的性能,而造成性能优异的原因在于高效的V8引擎 ...
- SolrCloud阶段总结
http://www.cnblogs.com/guozk/p/3498844.html SolrCloud阶段总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍SolrClou ...
- 【HDU2825】Wireless Password (AC自动机+状压DP)
Wireless Password Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u De ...
- Git创建一个自己的本地仓库
如果我们要把一个项目加入到Git的版本管理中,可以在项目所在的目录用git init命令建立一个空的本地仓库,然后再用git add命令把它们都加入到Git本地仓库的暂存区(stage or inde ...
- c++ RAII 资源管理就是初始化
RAII:(Resource Acquisition Is Initialization),也就是“资源获取就是初始化”,是C++语言的一种管理资源.避免泄漏的惯用法.C++标准保证任何情况下,已构造 ...
- Buddy system伙伴分配器实现
wikipedia:http://en.wikipedia.org/wiki/Buddy_memory_allocation The buddy memory allocation technique ...
- Win8.1、Office2013一键激活工具
Win8.1.Office2013一键激活工具 KMSpico V7.0 是一款激活Win8.Windows8.1和Office2013的工具,由国外网友heldigard基于KMSEmulator制 ...