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>

以下是它的外观：

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

我试过这个example。但我没有得到理想的结果。如何对内联元素进行制作？

Answer 1

你有＆＃34;显示：inline-block＆＃34;样式应用于defaults mode tcp timeout connect 5000ms timeout client 50000ms listen graylog bind *:514 mode tcp balance roundrobin server graylog1 10.0.0.1:514 server graylog2 10.0.0.1:514 timeout connect 20s timeout server 30s标记，而不是<A>标记。将它切换到LI标签，看起来应该是正确的。

此外，您可能应该尽量避免将样式直接放在这样的标记上，而是使用附加的样式表。想象一下，你必须改变其中的30个，这将是一个巨大的痛苦。如果您有样式表，则只需更改一个小行。

Answer 2

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

＆＃13;

<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>

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

试试这段代码吧。为了查看glyphicon我们必须添加bootstrap，这就是为什么我添加了背景颜色和宽度，高度属性设置为演示，复制粘贴到html页面

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

4 个答案: