`
Jabbar2011
  • 浏览: 165627 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

UL完美居中的方法[转]

    博客分类:
  • css
阅读更多
让UL完美居中


ul及li标签我们在写前端html页面的时候总是会用到,有时候我们需要一个横向菜单,不能定义宽度,里边的li还要自适应其中的文字内容(这是很苛刻的条件了),因为这时候的li有float:left属性,不好实现哦,这篇文章就是告诉大家如何做一个能自适应内容,不需要知道ul宽度,还能居中显示的菜单或者其它东西。

首先我们主要用的的是ul及li标签
<ul>
        <li>
                .......
        </li>
</ul>

和平时写的没什么差别,仔细看样式
ul{ position:relative; left:50%; float:left;}   
     //左浮动,定位对齐到容器中间,这时候的菜单是偏右的;
ul li{ position:relative:right:50%; float:left;}   
     //左浮动,让li浮动到一行,让li右侧相对ul偏移50%;
ul li{ padding:4px 12px;}     
   //给li弄些间距;


完成了通过两个50%的偏移完成了ul列表相对父容器偏移的效果;
分享到:
评论

相关推荐

    CSS完美兼容通用方法

    ### CSS完美兼容通用方法 #### 一、CSS Hack详解 CSS Hack是一种技术手段,用于解决不同浏览器对CSS解析差异导致的兼容性问题。通过特定的语法编写CSS样式,可以实现针对不同浏览器显示相同或相似的效果。 ##### ...

    完美实现浮动元素横排居中显示

    总结起来,本文提供的方法能够实现浮动元素的完美横排居中,并且通过一系列CSS技巧确保了良好的兼容性。这些技巧包括使用自动外边距来居中父容器、通过相对定位和负边距来居中子容器内部的元素,以及使用overflow:...

    CSS完美兼容IE6_IE7_FF的通用方法

    ### CSS完美兼容IE6_IE7_FF的通用方法 在网页设计与开发过程中,浏览器兼容性问题一直是前端开发者面临的重要挑战之一。特别是在早期的Web开发中,如何让网站同时兼容Internet Explorer 6(简称IE6)、Internet ...

    CSS完美兼容IE6IE7FF的通用方法

    ### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...

    网页设计中的常见问题及其解决方法(div+css)

    十四、完美的单象素外框线表格(在 IE5、IE6、IE7 及 FF1.0.4 以上中均可通过测试) table{ border-collapse:collapse; } td{ border:#000 solid 1px; } 知识点:表格的 border 样式、border-collapse 属性 十五...

    最常见的9种IE_css_bug及fix

    使用列表(`&lt;ul&gt;`)创建导航条时,在非IE浏览器中通常能完美呈现,但在IE中却可能遭遇“楼梯”式显示问题,即列表项未能整齐排列,出现错位或间距不一致的情况。 **问题表现**: - 在IE中,列表项(`&lt;li&gt;`)可能...

    使用APICloud从0开始写脉脉(四) 再谈顶部导航栏

    #### 实现方法 ##### 1. 整体布局 整体布局采用了一个垂直盒子模型,定义了总高度为75px。具体实现如下: ```html ; -webkit-box-orient: vertical; height: 75px;"&gt; &lt;ul class="flex1"&gt;&lt;/ul&gt; &lt;!-- 蓝色部分 --&gt;...

    jsp浏览器的兼容性

    本文档旨在帮助 JSP 开发人员解决浏览器之间的兼容性问题,提出解决方法,涵盖 Firefox、谷歌、百度和 IE6/7/9 浏览器的兼容问题。 1.Div 的高度参数值后加 px 在设置 Div 的高度时,需要在参数值后加上 px,例如 ...

    CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    本文主要探讨如何使用CSS Hack来实现CSS在IE6、IE7和Firefox之间的完美兼容。 首先,我们来看两种基本的CSS Hack方法: 1. `!important` Hack `!important` 规则用于提高CSS声明的优先级。在IE7及更新版本中,它...

    让IE和火狐同时兼容

    为了解决这一问题,可以采用以下方法: - 对于需要居中的`div`元素,在火狐浏览器中设置`text-align`属性后,还需要确保该`div`的`margin`值为`auto`。 - 在火狐浏览器中处理`padding`属性时,需要特别注意,因为这...

    完美JQuery图片切换效果的简单实现

    图片切换的核心在于使用jQuery的`fadeIn()`和`fadeOut()`方法,结合定时器`setTimeout`或`setInterval`来实现自动或手动的图片轮播。同时,当用户点击缩略图时,需要更新大图的显示,并确保对应的缩略图被选中。 ...

    CSS网站布局实录 (第二版)PDF版

    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...

    完美实现js选项卡切换效果(一)

    例如,通过设置id为“tab-list”的样式,可以控制选项卡的宽度、高度和自动居中显示。而id为“list”的样式则用于定义选项卡列表的布局和样式,比如列表项的宽度、边框等。类名为“active”的样式被用来突出显示当前...

    CSS在使用中的高级技巧(在实战中会用到)

    解决这类问题的一种方法是重置样式,即通过CSS为ul设置统一的padding和margin值。 二、CSS选择符的使用规范 class选择符可以在同一个文档中重复出现,而id选择符则要求全局唯一。如果一个标签同时使用了class和id...

    适合新手的CSS网页布局小技巧整理

    },可以创建出完美的单像素外框线表格,并确保跨浏览器兼容性。 16. 负边距的使用 在绝对定位的情况下,使用负的margin值可以在页面居中显示时,相对定位一个层,这在其他浏览器中不起作用的left属性在IE中同样有效...

    不错的整理的24则css技巧

    尤其是在需要页面居中的情况下,这种方法比使用left属性更为有效。 16. 绝对定位允许通过设置margin值来相对于元素本身的位置进行定位,这与top、left等属性相对与窗口边缘的定位是不同的。绝对定位的优势在于它...

Global site tag (gtag.js) - Google Analytics