首页 > web前端 > css教程 > 正文

css怎么把纵向排列变成横向

anonymity
发布: 2019-05-28 14:07:08
原创
13705人浏览过

有两种方法可以将纵向列表转变成横向列表。使用内联(inline)或浮动(float)的列表项。

css怎么把纵向排列变成横向

这两种方法都很好,但如果你想链接到具有相同的大小,你必须使用浮动的方法。

内联列表项

建立一个横向导航栏的方法之一是指定元素,

立即学习前端免费学习笔记(深入)”;

实例

li{
    display:inline;
}
登录后复制

display:inline; -默认情况下,<li>元素是块元素。在这里,我们删除换行符之前和之后每个列表项,以显示一行。

浮动列表项

简篇AI排版
简篇AI排版

AI排版工具,上传图文素材,秒出专业效果!

简篇AI排版 554
查看详情 简篇AI排版

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等,浮动 <li>元素,并指定为 <a>元素的宽度:

实例

li{
    float:left;
}
a{
    display:block;
    width:60px;
}
登录后复制

float:left - 使用浮动块元素的幻灯片彼此相邻

display:block - 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度

width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

以上就是css怎么把纵向排列变成横向的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号