如何将ul显示为内联块？

Question

如何在一行中对齐底部菜单，无论屏幕大小是多少？我试图放display: inline-block，但它不适合我。

这是CSS

footer #middle-footer{
 background: #F6F6F6;
 color: #000;
 font-size: 14px;
 font-weight: 300;
 padding: 50px 0 10px 0;
 text-align: center;
 left: 0;
 bottom: 0;
 width: 100%;
 height: auto;
 display: inline-block;
}
.bottom-menu ul{
 list-style-type: none;
 letter-spacing: 0.19px;
 font-size: 14px;
 }
.bottom-menu ul li{
 display: inline-block;
 font-family: 'Open Sans Bold', sans-serif;
 line-height: 1.8;
}
.footer-mobile-version{ display: inline-block; }

以下是链接http://mobiletest.me/sony_xperia_z2/2569987

Answer 1

您需要定位<li>代码而不是<ul>代码。

实施例

.bottom-menu ul li {
    display: inline-block;
}

修改

查看您提供的链接，我可以看到<a>标记内的<li>标记的填充占用了太多空间，因此文字不会掉落＆＃34;直列＆＃34 ;.周围<div>的宽度没有充分利用可用的屏幕空间也没有帮助。

实施例

.bottom-menu {
    width: 100%;
}

.bottom-menu ul li a {
    padding: 0;
}