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

当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码:

复制代码 代码如下: <div class="navbar"> <ul> <li><a href="/">Home</a></li> … </ul> </div>

CSS代码:

复制代码 代码如下: .navbar { text-align:center; } .navbar ul { display:inline-block; } .navbar li { float:left; } .navbar li + li { margin-left:20px; }

IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样

复制代码 代码如下: .navbar ul { *display:inline; *zoom:1; }

position:relative 使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。 HTML代码:

复制代码 代码如下: <div class="navbar"> <div> <ul> <li><a href="/">Home</a></li> … </ul> </div> </div>

CSS代码:

复制代码 代码如下: .navbar { overflow:hidden; } .navbar > div { position:relative; left:50%; float:left; } .navbar ul { position:relative; left:-50%; float:left; } .navbar li { float:left; } .navbar li + li { margin-left:20px; }

IE7下需要加入下列代码支持：

复制代码 代码如下: .navbar { position:relative; }

display:table 如果向使用极少的标签实现，这个方法是个不错的选择。 HTML代码:

复制代码 代码如下: <ul class="navbar"> <li><a href="/">Home</a></li> … </ul>

CSS代码:

复制代码 代码如下: .navbar { display:table; margin:0 auto; } .navbar li { display:table-cell; } .navbar li + li { padding-left:20px; }

不支持IE7及一下浏览器，其他的主流浏览器都支持。 display:inline-flex 这个方法需要使用 flex-layout 的知识。 HTML代码:

复制代码 代码如下: <div class="navbar"> <ul> <li><a href="/">Home</a></li> … </ul> </div>

CSS代码:

复制代码 代码如下: .navbar { text-align:center; } .navbar > ul { display:-webkit-inline-box; display:-moz-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flex; display:inline-flex; } .navbar li + li { margin-left:20px; }

使用CSS fit-content 值 下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。 HTML代码:

复制代码 代码如下: <div class="navbar center"> <ul> <li><a href="/">Home</a></li> <li><a href="/">About us</a></li> <li><a href="/">Our products</a></li> <li><a href="/">Customer support</a></li> <li><a href="/">Contact</a></li> </ul> </div>

CSS代码:

复制代码 代码如下: .center ul{ width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; }

浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。 这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。 根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。

转载于:https://www.cnblogs.com/jellyAndjammy/p/3995977.html

相关资源：数据结构—成绩单生成器