margin

Why is ie7 ignoring the left-margin on my first list item (only)?

蓝咒 提交于 2019-12-24 00:43:14
问题 http://blog.helpcurenow.org/test/mockups/mar2010/lp.html In the above landing page, I have an offers box that has four donation buttons. The first three are targeted with individual id's and given a left margin of 13px. All is well in every browser I'm viewing in except ie7. For some reason ie7 is ignoring the left-margin of 13px on the first list item, and only on that one. The strange part is when I open ie's developer tools (not actually viewing in ie7, but using ie8 in ie7 mode) and

多栏布局

橙三吉。 提交于 2019-12-24 00:10:16
水平方向-三栏布局 1.浮动布局 简介:左边固定宽度后左浮动,右边固定宽度后右浮动 .float .left{ float: left; width: 200px; background-color: yellow; } .float .right{ float: right; width: 200px; background-color: green; } .float .center{ background-color: pink; } <section class="float"> <div class="left">left</div> <div class="right">right</div> <div class="center"> 这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局 这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局 这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局 这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局这是浮动布局 </div> </section> 但是,这种布局方式有个缺点:当中间的内容很多时,将会出现“字围”效果,如下图所示 解决办法:创建一个BFC来解决上面的问题。众所周知创建BFC的条件有: 1

MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END

て烟熏妆下的殇ゞ 提交于 2019-12-23 22:41:11
总的来说:这是CSS3.0的对于文章段P容器的定义方法语句!display:block这个样式,只定义了P容器为一个块;后面四句是CSS3中的样式定义方法;-webkit-margin-before: 1em;-webkit-margin-after: 1em;分别定义p的上边距和下边距的数值是1倍字体高度,如10px像素的字,那么边距就为10px; -webkit-margin-start: 0px;-webkit-margin-end: 0px; 上面二句则定义为左右边距都为0PX,这个应该好理解;所以以上p {display: block;-webkit-margin-before: 1em;-webkit-margin-after: 1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}相当于CSS2.0中的p { display: block; margin-top: 1em; margin-bottom: 1em; margin-right: 0px; margin-left: 0px;} 但由于CSS3.0要求浏览器版本较高,所以国内并没有流行CSS3.0样式,依然以CSS2.0为主流,但以后应该是CSS3.0的天下,因为它代表着先进性。 下面是讲下它的由来:

后台管理页面1

自作多情 提交于 2019-12-23 15:47:43
1. html:标签 2.CSS: position background text-align margin padding font-size z-index overflow hover opacity float(clear:both) line-height border color display 页面布局: 后台管理布局: position:   fixed   relative   absolute 1. .left{ float:left; 因为float经常用,所以可以给它写一个样式,然后在下面直接应用这个样式就可以了。 2. 父亲定义了高度/宽度以后,里面的div才可以用%的形式来定义高度/宽度,定义的时候是以父亲div为标准的。现在的问题就卡在怎么样设置高度上了。是猜一下页面高度呢,还是设置100%呢(实际上无效)。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .pg-header{ height:48px; background-color:#2459a2; color:white; } .pg-content .menu{ width:20%; background-color

后台管理页面布局

吃可爱长大的小学妹 提交于 2019-12-23 15:47:27
1 <!DOCTYPE html> 2 <!--后台管理页面布局1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .right{ 15 float: right; 16 } 17 .pg-header{ 18 height:48px; 19 background-color: #2459a2; 20 color: white; 21 } 22 .pg-content .menu{ 23 width:20%; 24 background-color: red; 25 min-width: 200px; 26 height:500px; 27 } 28 .pg-content .content{ 29 width:80%; 30 background-color: green; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="pg-header"></div> 36 <div class="pg-content"> 37 <div class="menu left">a</div>

前端常用的CSS代码

て烟熏妆下的殇ゞ 提交于 2019-12-23 13:56:44
(非原创): demo演示 1、垂直居中对齐 .vc { position : absolute ; top : 50% ; left : 50% ; transform : translate ( -50%, -50% ) ; } .vc { position : absolute ; top : 50% ; left : 50% ; width : 100px ; height : 100px ; margin : -50px 0 -50px ; } ``````css 在这里插入代码片 2、全屏显示 html, body { position : fixed ; width : 100% ; height : 100% ; } div { height : 100% ; } 3、不同a标签链接使用不同样式 // link a [ href ^ = "http://" ] { background: url ( link . gif ) no-repeat center right ; } / / emails a [ href ^ = "mailto:" ] { background: url ( email . png ) no-repeat center right ; } / / pdfs a [ href$ = ".pdf" ] { background: url (

CSS-margin

半腔热情 提交于 2019-12-23 13:13:41
检索或设置对象四边的外延边距。 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。 如果只提供一个,将用于全部的四边。 如果提供两个,第一个用于上、下,第二个用于左、右。 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。 外延边距始终透明。 某些相邻的margin会发生合并,我们称之为margin折叠: 来源: https://www.cnblogs.com/justart/p/8900053.html

jQuery animate margin top

我是研究僧i 提交于 2019-12-23 06:44:06
问题 I have a script on jsfiddle: http://jsfiddle.net/kX7b6/ Nothing happens on hover On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens. The animation works, but not margin Just to show that the animation itself is working i added a opacity function to the animation. margin-top is set to 0px inline as far as I can see. 回答1: You had MarginTop instead of marginTop http://jsfiddle.net/kX7b6/1/ It is also very buggy if you leave mid animation, here is

How to set size of MARGINS in GridLayout

一世执手 提交于 2019-12-23 06:29:38
问题 I am adding ImageButtons one at a time to a GridLayout using RecyclerView. My app listens for incoming images and strings to label the buttons. I want to add a margin to the right of each button and text, so the words don't run into each other (like my image below). 回答1: No, these are not the sort of things an adapter is for. Set margin or padding (you probably want padding) inside your XML layout file. You can set android:paddingRight or android:paddingEnd in the XML declaration of the view.

How to set size of MARGINS in GridLayout

拥有回忆 提交于 2019-12-23 06:27:25
问题 I am adding ImageButtons one at a time to a GridLayout using RecyclerView. My app listens for incoming images and strings to label the buttons. I want to add a margin to the right of each button and text, so the words don't run into each other (like my image below). 回答1: No, these are not the sort of things an adapter is for. Set margin or padding (you probably want padding) inside your XML layout file. You can set android:paddingRight or android:paddingEnd in the XML declaration of the view.