CSS 设置技巧(单位和值与样式设置技巧)

2020-05-06 09:22:25易采站长站整理

    list-style:none;   
    margin:0;   
    padding:0;   
    display:inline;   
}   
/* margin-right:8px(设置li文本之间的间隔)*/   
.container li{   
    margin-right:8px;   
    display:inline;   
}   
</style>   

这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

  除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的方法,设置浮动和相对定位来实现。

方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。

代码如下:

XML/HTML Code复制内容到剪贴板

<body>  
<div class="container">  
    <ul>  
        <li><a href="#">1</a></li>  
        <li><a href="#">2</a></li>  
        <li><a href="#">3</a></li>  
    </ul>  
</div>  
</body>  
css代码:   
    
<style>  
.container{   
    float:left;   
    position:relative;   
    left:50%   
}   
    
.container ul{   
    list-style:none;   
    margin:0;   
    padding:0;   
        
    position:relative;   
    left:-50%;   
}   
.container li{float:left;display:inline;margin-right:8px;}