`

float:center实现 居中浮动

CSS浏览器XHTMLWebHTML 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="麦鸡(MacJi)的博客，关注Web内容、结构与表现。" name="description" />
<meta content="Copyright (c) 2008 MacJi" name="copyright" />
<meta content="麦鸡,MacJi" name="author" />
<meta content="web前端开发,麦鸡,MacJi,Blog,博客" name="keywords" />
<title>跨浏览器实现float:center，No CSS hacks</title>
<style>
ul,li{
margin:0;
padding:0;
list-style:none;
}

#macji .macji-skin{
float:left;
position:relative;
left:50%;
}
#macji .macji-skin li{
margin:10px;
padding:0 10px;
float:left;
position:relative;
right:50%;
}
</style>
</head>
<body>
<h1>跨浏览器实现float:center，No CSS hacks</h1>
<div id="macji">
<ul class="macji-skin">
<li>列表一,我是浮动的</li>
<li>列表二</li>
<li>列表三</li>
<li>这里可能是N</li>
</ul>
</div>
</body>
</html>

分享到：
| tcp协议
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css 跨浏览器实现float:center

    我们都知道float:left和float:right，但是否想过float:center呢？居中浮动。。。

    跨浏览器实现float:center

    原文：...居中浮动。。。 &lt;div id=macji&gt; &lt;ul class=macji-skin&gt; 列表一&lt;/li&gt; 列表二&lt;/li&gt; 列表三&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt; 我们希望实现li是浮动的，并且居中的（li个数不固定，ul宽度

    让横向排列的几个浮动(float:left)的子div居中显示

    div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示了，不过我们可以使用变通的方法达到这一效果，就是在父div上再套一个div，如下： 复制代码代码如下: ”outerdiv” xss=removed&gt; ”...

    [前端案例03]六个css动画相关案例

    2.三栏居中方式：将中间div置于结构最下方，分别给左右两侧内容设置左右浮动，这时由于左右两侧内容高度塌陷，最下方的div会向上位移，给该元素设置居中。 html代码： &lt;div class="left"&gt;&lt;/div&gt; ...

    间距浮动与对齐的最佳方案

    macji的跨浏览器实现：float:center可以解决居中问题。但，固定宽度的UL，内部固定宽度的N个LI的浮动，LI与LI的间距，UL和第一个及最后一个LI的间距。我脑残了！很可能是我真的SB了！看这个地址的方法：...

    让几个横向排列的浮动子div居中显示的方法

    div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示了，不过我们可以使用变通的方法达到这一效果，就是在父div上再套一个div，如下： 复制代码代码如下: ”outerdiv” xss=removed&gt; ”...

    XHTMl 第三章源代码

    #container{ /* 固定宽度且居中的版式 */ position:relative; margin:0px auto 0px auto; width:800px; text-align:left; background:url(container_bg.jpg) no-repeat bottom right; /* 底部右侧的...

    HTML+DIV+CSS

    text-align: center; /*水平居中*/ } img{ float:left; /*左浮动*/ border: 1px #9999cc dashed;/*边框类型*/ margin: 5px; /*内间距*/ } p{ font-size: 12px; text-indent: 2em; /*首行缩进*/ line...

    css入门笔记

    取值：auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性：background: 取值：颜色 2.背景图片 属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值：...

    stylus-utilities:一组有用的 Stylus mixin

    .centered center-both ( 300 px )清除修复 () 清除带有嵌套浮动块的元素周围的流。 .parent clearfix () .child float left证明合法 （） 用于将多个子项与父项的宽度对齐。justify-child（字体大小 = 16px） 适用...

Magicbox
Global site tag (gtag.js) - Google Analytics