`
zhangjie3140
  • 浏览: 3299 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

关于浮动元素li的居中方法

阅读更多

  这种办法想当不错,就是用相对定位来实现“float:center;”

 

.demo { 
border: 1px solid #CCC; 
margin: 5px auto; 
overflow: hidden; 
width: 1430px;/* 给包含ul的盒子设置宽度为浏览器窗口的物理宽度,发现li的内容仍然居中,说明无论是是否定宽,相对定位法均可以使float元素居中 */ 
} 
.demo ul { 
float: left; 
position: relative; 
left: 50%; 
} 
.demo ul li { 
border: 1px solid #555; 
float: left; 
position: relative;/* 只能用相对不能用绝对 */ 
padding: 5px; 
left: -50%;/* 或者right: 50%; */ 
list-style: none; 
margin: 10px; 
} 

 

分享到:
评论

相关推荐

    浮动后的li元素居中实现方法

    标题提到的“浮动后的li元素居中实现方法”主要探讨了如何在使用浮动布局时,确保`<li>`元素在导航条中居中对齐。以下是几种常用的方法及其优缺点: 1. **文本居中对齐**: - 在包裹`<ul>`的`<div>`上应用`text-...

    css如何让浮动元素水平居中

    然而,当需要将浮动元素水平居中时,常规的`margin: 0 auto`方法并不适用,因为这种居中方式依赖于元素的宽度,并且不适用于浮动元素。在本文中,我们将探讨几种使浮动元素在页面中水平居中的方法。 方法一: 这种...

    UL里的LI元素左浮动层一行显示时使其居中的方法

    在网页设计中,列表(LI元素)的布局是一个常见的需求,尤其是当需要将列表中的项目水平显示在一行内,并且要求这些项目居中显示时。通常情况下,列表项会使用CSS的浮动属性(float)来实现横向布局,比如左浮动。...

    具有Float属性的元素依然居中

    在网页布局中,浮动元素(如`<li>`标签)经常用于创建多列或列表,例如常见的页面导航条。当为这些元素设置`float:left`属性时,它们会沿着左侧排列,但有时我们需要整个包含这些浮动元素的容器(如`<ul>`或`<div>`...

    DIV CSS布局教程:应用ul、li实现表格形式

    `使`<li>`元素左浮动,形成多列布局,`margin`添加间隔以模拟表格边框。 - 使用不同的背景颜色(例如`#ccc`和`#999`)来区分表头和普通单元格。 3. **表格布局的灵活性**: - 使用`<ul>`和`<li>`的优点在于可以...

    css ul li导航菜单居中问题解决方法

    为了实现水平居中,我们使用了`float: left`属性将`li`元素浮动到左边,然后通过设置`#nav li`的`position`属性为`relative`以及`left`属性为`50%`,将所有的列表项移向容器的中心位置。然而,这一步只是简单地将...

    float:left的对象(导航)如何居中示例探讨

    当设置ul为display:inline-block时,ul就能够适应内部浮动元素(li)的宽度,同时又保持其宽度,使得整个ul能够居中显示。 但是,使用display:inline-block属性也有其弊端。当多个内联块级元素(如inline-block的li...

    div+css有实例,易学易懂

    #### 关于ul和li的样式详解 - **使用list-style-type属性**:控制列表项标志的样式。 - **使用list-style-position属性**:控制列表项标志的位置。 - **使用list-style-image属性**:用图像替换默认的列表项标志。 ...

    如何用float配合position:relative实现居中

    `float`主要用于创建浮动元素,允许元素在页面上左右移动,以便其他内容环绕它。在本例中,我们利用`float:left`使`.favViewicon ul`中的`li`元素向左浮动。 然后,`position:relative`属性允许我们相对元素原本的...

    9个最常见IE的Bug及其fix

    在使用浮动元素时,IE6可能会在元素之间产生额外的空白,导致布局不整洁。这种现象尤其在并排的浮动元素间更为明显。 **解决方案**:可以通过在浮动元素上设置`display: inline;`属性来解决这个问题。这将告诉IE6以...

    css自适应宽度 多种方法实现宽度自适应的水平居中

    此方法适用于父元素和子元素均未定义具体宽度时,通过设置父元素的text-align属性为center,并使子元素的display属性为inline-block,从而实现水平居中。具体实现时,父元素需要有明确的宽度,而子元素则是浮动的...

    通过定位来实现不定宽度居中显示

    1. 容器的宽度调整:通过设置ul元素的左浮动(float:left),使得ul的宽度变成其所有子元素(li元素)宽度的总和,而不是默认的100%。 2. 容器的位置调整:通过将ul设置为相对定位(position:relative),并使用left...

    浮动_style_浮动导航栏_css如何浮动_

    在网页设计中,浮动(Float)是CSS布局的重要概念,它允许元素脱离其正常文档流并使其周围的元素围绕它流动。浮动最初是为了处理图像布局而引入的,但随着时间的推移,它已成为创建复杂的网页布局的工具之一。在这个...

    在解决ul居中问题时想到的几点

    1. CSS 布局:在解决 ul 居中问题时,需要了解 CSS 布局的基本概念,如块级元素、行内元素、浮动元素等。块级元素是指占据整个宽度的元素,如 div、p、h1 等,而行内元素是指只占据内容宽度的元素,如 span、a、img ...

    div+css+ul-li制作横向导航栏

    3. 将`<li>`元素设置为并排显示,可以使用浮动或者Flexbox布局: - 浮动方式: ```css #navbar ul li { float: left; } ``` - Flexbox方式(更现代,推荐): ```css #navbar ul { display: flex; } #...

    IE 常见bug 及其fix

    解决方法与上一个问题类似,即为浮动元素添加`display: inline;`属性。 ```css #element { background: #95CFEF; width: 300px; height: 100px; float: left; margin: 30px 0 0 30px; border: solid 1px #36F...

    html5css3面试题及答案,前端面试题及答案-CSS篇.docx

    * 浮动引起的问题:父元素的高度无法被撑开,影响与父元素同级的元素 * 解决方法: + 利用 clear 清除浮动 + 在父元素后面额外添加标签 + 父元素上使用 after 伪类 + 利用 overflow 清除浮动 垂直居中 * 实现...

    ul和li 基本用法分析

    - 若要将水平布局的列表居中,可以设置父容器的`text-align: center`属性,但这样会使得`<li>`元素也居中。若要保持`<li>`元素左对齐,同时整个列表居中,需指定列表的宽度并设置`margin: auto`。 - 示例: ```...

    Web前端开发初级实操考试评分细则

    `clear`属性的`both`值用来清除元素两侧的浮动,防止其他元素因浮动影响其布局。`float`属性的`left`值让元素向左浮动,常用于实现流式布局。 CSS是用于美化HTML元素的样式语言。在试题二中,`css/style.css`表示...

Global site tag (gtag.js) - Google Analytics