<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrap{
width: 500px;
height: 100px;
background: #000;
}
.test{
padding-top: 10px;
float: left;
clear: both;
position: relative;
left: 50%;
}
.test li{
float: left;
margin-right: 5px;
position: relative;
left: -50%;
}
.test li a{
float: left;
text-decoration: none;
width: 20px;
text-align: center;
line-height: 20px;
height: 20px;
background: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="test">
<li><a href="#">1</a></li>
</ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
</html>
highfly-s
- 浏览: 100398 次
- 性别:
- 来自: 北京
-
最新评论
-
_大大大雄：
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai：
博主，看了博客，收获很多，这个例子运行的时候，会报下面的错误： ...
jsp 权限过滤器的应用
相关推荐
这种方法特别适用于那些没有固定宽度的元素，因为它不需要预先知道元素的具体宽度。 其次，`display`属性的`inline-block`值是一个非常有用的工具，它将元素的行为结合了块级元素和内联元素的特点。块级元素的特点...
在网页设计中，让元素居中是一个常见的需求，特别是对于`div`这样的块级元素。在本示例中，我们探讨的是如何实现`div`的绝对居中，无论是水平还是垂直方向，即使`div`的高度是不确定的。下面将详细解释这个`DIV绝对...
对于垂直居中，如果内容高度不确定，可以使用Flexbox布局，为`.section`类添加以下样式： ```css .section { display: flex; align-items: center; justify-content: center; } ``` 对于水平居中，确保内容容器有...
这种方法的优点在于能够使块级元素居中，且兼容性好，但是在布局上子元素的宽度必须是固定的或者能够确定。 第三种思路是通过绝对定位的偏移属性实现水平居中。这种思路可以细分为三种方式，分别是配合translate()...
2. **块级元素（block level）的居中**：若要使一个具有固定宽度的块级元素如`<div>`居中，可以设置`margin: 0 auto;`。这里的`auto`值会使得左右外边距自动计算，从而达到居中效果。 3. **多个块级元素的水平居中*...
传统的垂直居中方法包括使用固定高度和line-height属性，使得行内内容垂直居中，但是这种方法在动态内容或者高度不确定的情况下并不适用。随着CSS的进化，更多灵活的垂直居中技术得以应用。例如，使用flex布局中的...
这种方式适用于块级元素，且其宽度是固定的或者可以通过其他方式确定。 然而，需要注意的是，这种方法仅在子`div`的宽度已知或者可以计算的情况下有效。如果子`div`的宽度是百分比或依赖于内容，那么可能需要使用更...
这种方法在IE8及以上版本中支持，但不适用于块级元素居中。 5. 使用line-height属性 对于行内元素或行内块级元素（inline or inline-block），可以通过设置line-height的值与元素的height一致来实现垂直居中。这是...
- 通过设置`margin: 0 auto`可以使固定宽度的`div`水平居中。 - 浮动元素居中，可以通过设置容器的外边距负值实现，确保总宽度的一半为负值外边距，但需要确定容器的宽度。 这些基础知识构成了网页设计的基本框架...
- `margin: 0 auto`：这是最常见的水平居中方法，适用于块级元素。通过设置左右边距为自动，元素会被放置在其父元素的中心位置。 - **文字水平居中**：可以使用`text-align: center`配合`line-height`等于元素高度...
- **自动居中**：当宽度确定且希望元素居中时，可以使用`margin: 0 auto;`来实现，此时左右`margin`的值会被设置为相等，从而达到居中的效果。 **垂直格式化**关注的是元素高度的确定以及如何使元素垂直居中。 - *...
2. **行内元素与块级元素**：行内元素如`<a>`、`<span>`、`<img>`等，它们在同一行内显示，不自动换行。块级元素如`<div>`、`<ul>`、`<li>`等，它们各自占据一行，可以设置宽度和高度。 3. **空(void)元素**：没有...
3. 居中对齐：使用`margin: auto`可以实现水平居中，但只适用于设置了固定宽度的元素。对于自适应宽度的元素，可以利用Flexbox或Grid布局实现。 四、Flexbox布局 1. 弹性布局（Flexbox）：是现代CSS布局的重要工具...
- **11-2 元素分类--块级元素** - 块级元素的特点。 - 如何使用块级元素进行布局。 - **11-3 元素分类--内联元素** - 内联元素的特点。 - 如何使用内联元素进行文本布局。 - **11-4 元素分类--内联块状元素** -...
CSS中，实现一个块级元素的水平垂直居中可以采用多种方法。文章中提到的一种方法是结合`position: absolute`和负边距以及`margin: auto`来实现。具体步骤如下： - 首先，为父级元素设置`position: relative`，这...
- 使用`margin: auto`配合固定宽度：`div { width: 200px; margin: auto; }` - 使用Flexbox：`div { display: flex; justify-content: center; align-items: center; }` 14. **display有哪些值？说明他们的作用。...
`autofocus`属性可以自动将焦点设置到指定的表单元素上，通常用于第一个输入字段。 ##### 25. 文字排版 **（1）字体** `font-family`属性用于定义元素的字体系列。 **（2）字号、颜色** `font-size`属性用于定义...