css文字自动横向排列,css代码横向排列怎样自动适应宽度？

匿名用户

1级

2017-12-01 回答

当父元素和子元素都没有定义宽度的情况下实现水平居中：

display:inline-block

可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。

1、HTML代码:

代码如下:

• Home

…

2、CSS代码:

代码如下:

.navbar {

text-align:center;

}

.navbar ul {

display:inline-block;

}

.navbar li {

float:left;

}

.navbar li + li {

margin-left:20px;

}

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

代码如下:

.navbar ul {

*display:inline;

*zoom:1;

}

position:relative

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

HTML代码:

代码如下:

• Home

…

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;

}

浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。

这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。

根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。