Posted on | by liu
在网页中，大家经常需要将一些代码或者列表横向显示出来，以方便用户阅读。在这种情况下，大家可以使用 CSS 来实现。下面大家将介绍如何使用 CSS 来横向显示列表和代码。
1. 列表横向排列
要将列表横向排列，大家可以使用 CSS 的 display 属性。将列表项设置为 inline 或者 inline-block 可以让其水平排列。
例如，下面的 HTML 代码中有一个无序列表：
“`
“`
大家可以使用下面的 CSS 代码将其横向排列：
“`
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
“`
其中，list-style: none 可以去掉列表项的默认样式，margin 和 padding 属性用来清除列表的内外边距，display: inline-block 用来将列表项横向排列。margin: 0 10px 则是设置每个列表项之间的距离为 10px。
2. 代码横向显示
与列表类似，横向显示代码也可以使用 CSS 的 display 属性。但是，为了保持代码的格式和排版，大家还需要使用 pre 标签和 white-space 属性。
例如，下面的 HTML 代码中有一段代码：
“`
function sum(a, b) {
return a + b;
}
“`
大家可以使用下面的 CSS 代码将其横向排列：
“`
pre {
display: inline-block;
background-color: #f8f8f8;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
white-space: pre-wrap;
word-wrap: break-word;
}
“`
其中，display: inline-block 和 padding 属性用来让代码块横向排列，并增加一些内边距以增加可读性。background-color 和 border 属性用来美化代码块的外观。white-space: pre-wrap 则是设置代码块保留空白和换行符，word-wrap: break-word 则是让较长的行自动换行，以保持代码块的格式和排版。最后，注意在 pre 标签中使用 code 标签可以进一步美化代码的显示效果。
总之，通过使用 CSS 的 display 属性和一些其他属性，大家可以很容易地将列表和代码横向排列，并提高网页的可读性和美观性。