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将会用于未来。

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

css文字与省略号重叠,CSS 文字溢出处添加省略号(示例代码)
兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的 ...
css文字瘦,前端开发CSS减肥工具:CSS Usage
做 web前端开发用什么工具包前端开发产业是指什么意思前端构建工程师经常会遇到随着网站产品的规模扩大.产品数量.日常专题上下线等情况,造成网站的CSS Usage.首先,我们需要安装Firefox ...
android朋友圈自动点赞,30行代码实现朋友圈自动点赞
首先祝大家新年快乐,过年了,允许我水一篇博客.不知道大家都回老家了没,不过我是没有回去,晚上吃完年夜饭看到很多人发朋友圈,为了增进和大家的友谊,于是就想着给大家点个赞,无奈内容太多了,就搞个自动化脚本 ...
css 文字过长省略号,css实现文字过长显示省略号的方法
因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法 ...
css扫光效果总结，css文字扫光，css图片扫光
前言今天来和大家一起探讨一下图片的扫光效果吧! 思路其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动! 但是这个运动的光,一般是用过伪元素来::after或者::bef ...
css文字定位最右边,CSS 控制文字定位
CSS 控制文字定位作者:不详来源: 日期:2002-8-5 [code] P.double {line-height: 2} P.right {text-align: right} P.cent ...
css文字定位最右边,css 靠右但是不要顶在右边有点距离怎么写
可以使用"文本-对齐:对:"把文字向右对齐. 1.新建一个DUHTML文档,在body标签中添加div标签,为div设置一个ID,以Demo为例: 2.在div标签中添加文本,然后 ...
css+文字排在底部,css怎么让文字居于div的底部
css怎么让文字居于div的底部发布时间:2020-11-30 11:02:25 来源:亿速云阅读:84 作者:小新小编给大家分享一下css怎么让文字居于div的底部,相信大部分人都还不怎么了解 ...
css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果
Title .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: #F2AE ...
小程序css 文字居中,小程序css设置垂直居中显示
有2种方式设置一个容器的元素垂直居中: 第1种 .container { position: absolute; top: 50%; left: 50%; transform: translate(- ...

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

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

最新文章

热门文章