Html Can'；t在一条水平线上对齐菜单项

最后一个包含3项，第三个包含2项，第一个和第二个包含2项

我找不到一个方法，让所有的项目都排成一行，然后再做其他的东西在它下面

@charset“utf-8”；
/*CSS文档*/
* {
填充：0；
边际上限：0px；
右边距：0px；
左边距：0px；
边缘底部：0px；
字体系列：“Lato”，无衬线；
框大小：边框框；
}
.向右浮动{
浮动：对；
}
法兰西{
字体大小：.8em；
字体系列：“FontAwesome”；
线高：22px！重要；
右边距：2px；
}
下拉列表{
显示：内联块；
边际上限：0px；
右边距：0px；
边缘底部：0px；
}
下拉标签{
显示：块；
宽度：200px；
背景：#FFFFFF；
填充：15px 20px；
}
下拉标签：悬停，下拉标签：悬停{
背景：#e4703e；
颜色：白色；
光标：指针；
}
下拉标签{
颜色：#e4703e；
左边框：4px实心#e4703e；
位置：相对位置；
z指数：2；
}
下拉输入{
显示：无；
}
下拉输入~ul{
位置：相对位置；
可见性：隐藏；
不透明度：0；
顶部：-20px；
z指数：1；
}
下拉输入：选中+标签{
背景：#e4703e；
颜色：白色；
}
下拉输入：选中~ul{
能见度：可见；
不透明度：1；
排名：0；
}
下拉列表：第n个孩子（1）{
左边框：4px实心#E74C3C；
}
下拉列表ul li:n个孩子（1.fa）{
颜色：#E74C3C；
}
下拉列表ul li:n子对象（1）：悬停{
背景：#E74C3C；
颜色：白色；
}
下拉列表ul li:n个孩子（1）：hover.fa{
颜色：白色；
}
下拉列表：第n个孩子（2）{
左边框：4px实心#0072B5；
}
下拉列表：第n个孩子（2.fa）{
颜色：#0072B5；
}
下拉列表ul li:n个孩子（2）：悬停{
背景#0072B5；
颜色：白色；
}
下拉列表ul li:n个孩子（2）：悬停.fa{
颜色：白色；
}
下拉列表：第n个孩子（3）{
左边框：4px实心#2C3E50；
}
下拉列表：第n个孩子（3.fa）{
颜色：#2C3E50；
}
下拉列表ul li:n个孩子（3）：悬停{
背景#2C3E50；
颜色：白色；
}
下拉列表ul li:n个孩子（3）：悬停.fa{
颜色：白色；
}
.制作动画{
-webkit转换：all.3s；
-moz转换：all.3s；
-ms转换：all.3s；
-ms转换：all.3s；
过渡：全部3秒；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
/*铬与狩猎*/
-moz背面可见性：隐藏；
/*火狐*/
-ms背面可见性：隐藏；
/*Internet Explorer*/
}
@字符集“utf-8”；
/*CSS文档*/
身体{
边缘顶部：180像素；
背景色：#112；
背景色：#0c2d41；
字体系列：roboto，'helvetica neue'，helvetica，arial，无衬线；
}
.集装箱{
宽度：800px；
保证金：自动；
}
.行{
位置：相对位置；
高度：50px；
z指数：1；
明确：两者皆有；
边缘底部：30px；
文本对齐：居中；
}
.行-介绍{
填充顶部：10px；
字体大小：16px；
线高：28px；
字体大小：300；
颜色：#fff；
不透明度：0.4；
右边距：0px；
}
.行--介绍范围{
字体大小：11px；
}
.歪标题{
字体大小：25px；
}
.倾斜标题跨度{
位置：相对位置；
显示：内联块；
宽度：40px；
高度：50px；
保证金：自动；
z指数：2；
文本对齐：居中；
颜色：#fff；
字体系列：“roboto浓缩版”；
字号：700；
字号：35.714285714285715px；
线高：50px；
-webkit变换：歪斜（-15度）；
-ms变换：歪斜（-15度）；
变换：歪斜（-15度）；
-webkit转换来源：0 100%；
-ms变换原点：0.100%；
变换原点：0.100%；
-webkit转换：所有0.2秒；
过渡：均为0.2s；
游标：默认值；
}
.倾斜标题范围：之后，
.倾斜标题范围：之前{
显示：块；
排名：0；
左：0；
位置：绝对位置；
背景#185a81；
高度：50px；
宽度：40px；
内容：''；
z指数：-1；
-webkit转换：所有0.2秒；
过渡：均为0.2s；
}
.倾斜标题范围：之前{
背景：rgba（0,0,0,0.1）；
-webkit变换：歪斜（15度）；
-ms变换：歪斜（15度）；
变换：歪斜（15度）；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
}
.倾斜标题范围：第n个子项（偶数）{
背景色：#154e70；
-webkit变换：歪斜（15度）；
-ms变换：歪斜（15度）；
变换：歪斜（15度）；
-webkit转换来源：100%100%；
-ms变换原点：100%100%；
变换原点：100%100%；
}
.倾斜标题范围：第n个子项（偶数）：之后{
背景色：#154e70；
}
.倾斜标题范围：第n个子项（偶数）：之前{
-webkit转换来源：100%0；
-ms变换原点：100%0；
变换原点：100%0；
-webkit变换：歪斜（-15度）；
-ms变换：歪斜（-15度）；
变换：歪斜（-15度）；
}
.倾斜标题span.flat{
-webkit变换：skewY（0）；
-ms变换：skewY（0）；
变换：歪斜（0）；
}
.倾斜标题跨度.展开：之前{
-webkit变换：skewY（0）；
-ms变换：skewY（0）；
变换：歪斜（0）；
}
.skew title span.flat:第n个子项（偶数）：之后{
背景色：#185a81；
}
.skew title span.alt:之后{
背景色：#b94a2c；
}
.skew title span.alt:n子项（偶数）：之后{
背景色：#a14026；
}
.skew title span.alt.flat:第n个子项（偶数）：之后{
背景色：#b94a2c；
}
B.蓝线{
颜色：#326c9c；
}

代码笔-倾斜标题文本
约斯特莱克科技公司
从2014年开始制作游戏

家

处理

游戏

@Venture

编码

代码笔
Github


联系我

谷歌+
推特
蒸汽

$（'.skew title'）.ch
<ol>
    <li>Games</li>
    <li>Coding</li>
    <li>Contact Me</li>
</ol>

<style>
ol{
padding: 20px; 
list-style-type:decimal;
}
ol li {
display: inline;
margin: 0 10px;
padding: 0 10px;
}
</style>