<!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{ padding:0; margin:0;}
a,a:link,a:visited,a:hover,a:active{
font: 12px/1.333 微软雅黑, tahoma, arial, 宋体, sans-serif;
text-decoration:none;
color:black;
}
ul,li{ list-style:none;}
#test{
overflow:hidden;
margin:10px;
}
#test ul{
margin-left:-1px;
zoom:1;
}
#test ul li{
float:left;
padding:0px 8px;
border-left:1px solid #aaa;
}
</style>
</head>
<body>
<div id="test">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
在CSS布局中，margin负值是一个非常有用的技巧，它能够帮助开发者解决许多复杂的设计问题，尤其是在需要精细调整元素位置或创建特殊布局时。虽然初学者可能会对负值margin感到困惑，但理解其工作原理和应用场合后，...
具体来说，在CSS2.1规范中，对于垂直方向上的`margin`，当它们之间没有非空内容、`padding`区域、`border`边框或者使用了清除（clearing）技术时，这些垂直`margin`就有可能发生折叠。 #### 三、`margin` 折叠的...
这种方法是通过设置`<select>`元素的`margin`属性为负值来隐藏原有的边框，然后给其父元素添加边框。代码示例如下： ```html ;width:80"> <select style="margin:-2;width:84;background:#eeeeee"> ...
让我们深入探讨一下CSS中margin负值的应用及其原理。 首先，理解margin的基本概念。在CSS中，margin是元素周围的空间，它分为上、下、左、右四个方向。默认情况下，margin设置为正值会使元素与其相邻元素之间产生...
水平居中可以通过 text-align: center、margin: auto、left 50% + margin-left 负值、display: flex, justify-content: center 等方式实现。垂直居中可以通过 line-height 的值等于 height 值、top 50% + margin-top...
- 父子元素的margin重叠：当父元素与其子元素相邻的边距之间没有其它内容（比如边框、内边距、非空内容或可见的后代元素）时，这两个边距会折叠。 - 元素自身的margin-bottom和margin-top相邻时也会折叠。 5. 折叠...
这个规则是基于CSS盒模型的，盒模型定义了元素占用空间的方式，包括内容(content)、内填充(padding)、边框(border)和外边距(margin)。 如果这个总和超过了父元素的内容区宽度，浏览器会自动进行调整。如果`margin-...
- 浮动元素居中：使用`float`配合`left: 50%`，`margin-left`负值来调整 - 绝对定位的div居中：利用`left: 0`, `right: 0`, `margin: 0 auto`，或者`top: 50%`, `left: 50%`，并用负`margin`调整 - 使用`flexbox`...
6.margin可以设置负值，padding不可以 7.margin常出现的BUG: a:当第一个子元素和父元素没有加浮动的情况下，第一个子元素加的margin-top值会错误的也加在父元素上，其他方向没问题。 b:上下相邻两个元素之间的...
在盒子里 margin 可以写负值，Padding 不可以写负值。 标准盒模型和怪异盒模型 标准盒模型和怪异盒模型是两种不同的盒模型计算方法。标准盒模型的计算方法是：width + 左右 padding + 左右 border + 左右 margin，...
- 通过 `margin-left` 和 `margin-top` 的负值来调整 div 的中心位置。 - 最重要的是，设置 `display: flex;` 及其子属性 `justify-content: center;` 和 `align-items: center;` 来实现内容的水平垂直居中。 3. ...
- `border-radius` 用于创建圆角边框，可以使用长度值（不允许负值）或百分比来设定圆角半径，如`border-top-left-radius`设置对象左上角的圆角。 2. 背景（Background） - `background` 是一个复合属性，用于...
用法和margin，padding取值类似。 四条线将背景图分割成了9个部分，其中1,2,3,4,6,7,8,9这八个区域将会被切割，作为图片边框，如果除了设置数值或者百分数，还加了一个“fill”， 默认舍弃源图片的中心块。一旦使用...
通过设置盒子模型的基本属性，可以实现各种布局，例如水平居中、垂直居中、固定宽度和高度等。 4. 盒子模型的实现 盒子模型可以通过CSS样式来实现，例如： * margin：设置外边距的值，例如margin: 1px 2px 3px 4...
外边距（margin）则是元素边框与相邻元素之间的距离。同样，有margin-top、margin-right、margin-bottom和margin-left，以及简写形式`margin`。与内边距不同，外边距可以设置为负值，从而实现某些特殊布局效果。例如...
2. **自动外边距（`auto`）**：`margin: auto`可以使元素在容器中居中，通常用于水平居中。在流体布局中，`margin: auto`配合`width`设置可以实现元素在父容器内的自适应居中。 3. **百分比值**：外边距可以设置为...
标题“equal-height-borders:Bootstrap列上的等高边框”指的是如何在Bootstrap的网格系统中实现列的等高边框，使每一列的边界在同一水平线上，即使内容量不同。 描述中提到的“可以使用两种不同的方法在引导程序列...
- **负值**：`padding`不接受负值，但`margin`可以，这可以用于重叠元素或创建特殊布局效果。 图片资源可能包含了示例代码、布局展示和解释，通过观察这些图片，可以更直观地理解`margin`和`padding`的效果。 在...
- `margin`可以取负值，这意味着元素可以与其他元素重叠。 - `margin`值不会影响元素自身的尺寸，但它会增加元素的总占用空间。 **使用方法**： - **单个方向设置**：通过`margin-top`、`margin-right`、`margin-...
盒模型是指网页元素（如div、p等）在页面上的表现形式，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。 外边距（margin）是元素周围的空间，用于控制元素与元素之间的距离，以及...