`
peter潘
  • 浏览: 10566 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

margin负值-垂直列表消除边框

阅读更多
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<style>	
	body,ul,li{margin:0;padding:0;}
    ul,li{list-style:none;}
    #test{
        margin:20px;
        width:390px;
        background:#F4F8FC;
        border-radius:3px;
        border:2px solid #D7E2EC;
    }
    #test li{
        height:25px;
        line-height:25px;
        padding:5px;
        border-bottom:1px dotted #D5D5D5;
        margin-bottom:-1px;
    }
</style>
</head>
<body>

	<ul id="test">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
	
</body>
</html>
分享到:
评论

相关推荐

    Firefox下margin-top会出错

    具体来说,在CSS2.1规范中,对于垂直方向上的`margin`,当它们之间没有非空内容、`padding`区域、`border`边框或者使用了清除(clearing)技术时,这些垂直`margin`就有可能发生折叠。 #### 三、`margin` 折叠的...

    css水平垂直居中

    - 通过 `margin-left` 和 `margin-top` 的负值来调整 div 的中心位置。 - 最重要的是,设置 `display: flex;` 及其子属性 `justify-content: center;` 和 `align-items: center;` 来实现内容的水平垂直居中。 3. ...

    CSS重要属性之 margin 属性知识大整合(必看篇)

    - 父子元素的margin重叠:当父元素与其子元素相邻的边距之间没有其它内容(比如边框、内边距、非空内容或可见的后代元素)时,这两个边距会折叠。 - 元素自身的margin-bottom和margin-top相邻时也会折叠。 5. 折叠...

    html面试常考考点+css常考考点

    垂直居中可以通过 line-height 的值等于 height 值、top 50% + margin-top 负值、transform: translate(-50%, -50%)、top, left, bottom, right = 0 + margin: auto 等方式实现。 CSS 图文样式 1. Line-height 的...

    css中文对照手册.pdf

    - `border-radius` 用于创建圆角边框,可以使用长度值(不允许负值)或百分比来设定圆角半径,如`border-top-left-radius`设置对象左上角的圆角。 2. 背景(Background) - `background` 是一个复合属性,用于...

    HTML盒子模型PPT课件.ppt

    通过设置盒子模型的基本属性,可以实现各种布局,例如水平居中、垂直居中、固定宽度和高度等。 4. 盒子模型的实现 盒子模型可以通过CSS样式来实现,例如: * margin:设置外边距的值,例如margin: 1px 2px 3px 4...

    DIV+CSS创建网页-边距属性.pptx

    外边距(margin)则是元素边框与相邻元素之间的距离。同样,有margin-top、margin-right、margin-bottom和margin-left,以及简写形式`margin`。与内边距不同,外边距可以设置为负值,从而实现某些特殊布局效果。例如...

    css margin属性深入解析

    5. **非替换内联元素**:对于非替换内联元素,垂直`margin`不起作用,这意味着`margin-top`和`margin-bottom`不会改变非替换内联元素的高度或位置。 ### `margin`的基本写法 `margin`属性可以采用多种语法形式来...

    equal-height-borders:Bootstrap列上的等高边框

    3. **边距补偿**:由于边框占据了一部分空间,可能会导致内容区域内部的垂直间距不均匀。为了解决这个问题,可以使用负的`margin`来抵消边框的宽度。 ```css .equal-height-columns { display: flex; } .equal-...

    margin属性[参照].pdf

    盒模型是指网页元素(如div、p等)在页面上的表现形式,包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。 外边距(margin)是元素周围的空间,用于控制元素与元素之间的距离,以及...

    css盒子模型 css margin 外边框合并

    CSS 盒子模型是网页设计中理解元素布局的基础,它定义了元素的四个部分:内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。内容区域是元素实际显示的数据部分,内边距是内容与边框之间的...

    CSS中使用负margin值来调整居中位置

    类似地,要实现垂直居中,则需要设置元素的高度,并对 `margin-top` 和 `margin-bottom` 使用负值,即 `-(高度 + 上下padding + 上下border)/2`。通过将元素的 `position` 属性设置为 `absolute`,然后使用 `top: 50...

    前端面试精简篇前端面试精简篇

    在实现上下垂直居中的布局时,我们可以使用 margin、position + margin (负值)、flex、IFC + vertical-align: middle 等方案。其中,在定高方案中,我们可以将元素高度设置为 100px,然后将 margin 设置为 50px 0 ...

    jfreechart-1.0.14

    void setSeriesOutLineStroke(int series,Stroke stroke) 指定分类的图形边框的线条笔触 void setSeriesPaint(int series,Paint paint) 指定分类图形的颜色 void setSeriesShape(int series,Shape shape) 指定分类...

    IE和FireFox的CSS兼容

    要消除这一差异,可以减少代码中的空白字符,或者使用负值`margin`进行调整。 4. **不规范代码的处理**: - IE通常能容忍缺少的关闭标签,而Firefox则可能导致布局混乱。遵循严格的HTML和CSS标准能减少这类问题。 ...

    css实现div水平、垂直居中兼容chrome、ie8

    然后使用`margin`的四个值为负值的方式来实现居中,其值为宽度和高度一半的负值。 尽管以上方法在不同浏览器间具有良好的兼容性,但值得注意的是,并非所有示例都兼容IE8。在IE8中,`display: table-cell`和`box-...

    HTML5+CSS3 边框阴影.pdf

    3. **垂直偏移量**:决定阴影在垂直方向上的位移。正值会使阴影向下移动,负值则使阴影向上移动。 4. **模糊半径**:用于控制阴影边缘的模糊程度。数值越大,阴影边缘越模糊。如果设置为0,阴影将没有模糊效果。 5...

    对未知高度的图片设置垂直居中的方法详解

    这种方法的一个弊端是在标准浏览器下不能使用margin属性,而且在IE8中设置边框无效。 方法二则是使用CSS Hack,即通过条件注释针对IE6/7进行特定的设置,而不影响标准浏览器。具体步骤如下: 1. 设置#box的display...

    深入理解css中的margin属性(推荐)

    因此,开发者在使用margin属性时需要考虑到这些差异,使用前应进行充分测试,或使用CSS重置(reset.css)来消除浏览器默认样式的影响。 总之,理解CSS中的margin属性是创建良好布局的关键。通过掌握margin的基本...

Global site tag (gtag.js) - Google Analytics