如何使两个ul li元素内联？

Question

我的页面中有这个ul元素：

            <ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;">             
                <li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a></li>
                <li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a></li>         
            </ul>

这里看起来如何：

我需要更改上面的外观并使两个元素都内联：

我试过这个例子 。 但是我没有得到理想的结果。 如何制作内联元素？

Answer 1

您已将“ display：inline-block”样式应用于<A>标记而不是<LI>标记。 将其切换到LI标签，它对您来说应该看起来正确。

另外，您可能应该避免将样式直接放在这样的标签上，而应使用附加的样式表。 假设您必须更改其中的30个，那将是一个巨大的痛苦。 如果您有样式表，则只需更改一小行。

Answer 2

您可以尝试在<ul>标记中使用display:inline-flex 。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;display:inline-flex;"> <li><a href="#" style="text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a> </li> <li><a href="#" style="text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a> </li> </ul> 

Answer 3

我看到这个问题被标记为twitter-bootstrap 。 看来您正在尝试使用内置的.nav类，但同时也尝试将其向左对齐。 您还缺少使.nav正常工作的课程。 定义引导导航需要两个部分（例如nav nav-navbar ， nav nav-pills ）。 我建议使用.nav-pills 。 这将使pull-left不必要，您可以将其删除。 您还应该删除那些内联样式。 要使字形图标居中，只需使用.text-center或创建自定义样式即可。 请不要内联样式。

 @import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css) 

 <ul class="nav nav-pills"> <li><a href="#" class="text-center"><i class="glyphicon glyphicon-tree-conifer"></i><br>sites</a></li> <li><a href="#" class="text-center"><i class="glyphicon glyphicon-tree-conifer"></i><br>events</a></li> </ul> 

Answer 4

只需尝试使用此代码。 为了查看glyphicon，我们必须添加bootstrap，这就是为什么我添加了设置为演示的背景颜色和宽度，高度属性，然后将其复制粘贴到html页面

 .nav li { display:inline-block; width:47%; background:#999; } .nav li i { background: #000 none repeat scroll 0 0; display: block; height: 10px; width: 10px; margin:0 auto; } 

 <ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;"> <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i>sites</a></li> <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i>events</a></li> </ul>