简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

css列表怎么横着排列

王林
发布： 2020-11-16 09:29:33
原创
12558 人浏览过

css列表横着排列的方法：可以利用【display:inline】属性把【

  • 】标签设定为内联元素来实现横向排列效果。display属性规定了元素应该生成的框的类型。

    • css列表怎么横着排列

    思路：

    设定

  • 标签的display:inline，把
  • 设定为内联元素来实现横向排列的效果。

    （推荐教程：css视频教程）

    属性介绍：

    display 属性规定元素应该生成的框的类型。

    具体代码：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表横向排列的另一种方法</title>
<style type="text/css">
ul li{display:inline;background:#F93; padding:5px;}}
</style>
</head>

<body>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
</body>
</html>
    登录后复制

    效果：

    82f4458e7193e8ff1898e0624478aa4.png

    问题：

    li之间有空隙

    解决办法：

    把li写成一行

    <ul>
    <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
</ul>
    登录后复制

    效果：

    d9ffa2c8572acba0b12409a2a3a377f.png

    相关推荐：CSS教程

    以上是css列表怎么横着排列的详细内容。更多信息请关注PHP中文网其他相关文章！

    • 相关标签：
    css 列表
    来源：php.cn
    上一篇：css文件中引用图片不显示怎么办 下一篇：css怎么才能让字等距分开
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    关于CSS思维导图的课件在哪？ 课件
    来自于 2024-04-16 10:10:18
    0
    0
    1335
    页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
    来自于 2024-04-06 21:58:04
    0
    1
    800
    动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...
    来自于 2024-04-06 20:57:16
    0
    1
    487
    如何在 CSS 中使浮动元素垂直堆叠而不是水平堆叠？ 我正在尝试制作一个包含两列的网页，一侧具有主要内容，另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐，所以它水平堆叠，但我希望它垂直堆叠。我当前的代码：.topich...
    来自于 2024-04-06 20:45:26
    0
    2
    386
    有没有办法强制弹性框中的文本垂直居中，无论我们有什么其他 CSS 代码？ 我有以下CSS代码，它是我正在开发的网站中使用的更大CSS代码的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content:c...
    来自于 2024-04-06 20:41:51
    0
    1
    518
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！