需要帮助修复导航栏，特别是Inline-Block

Question

我无法将列表元素放到想要的位置：

我希望将第一个列表$row[1]放在中间，将注销列表项目放在右上角。 而且我知道有人会对使用通用字符（*）的人大喊大叫，但我所有的字体都一样，所以没关系。

 * { font-family: "Verdana", Sans-serif; } ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; vertical-align: baseline; } #nav { position: absolute; top: 50px; /*Change as needed*/ right: 0; } li { color: white; text-align: center; text-decoration: none; padding: 4px; padding-top: 0; display: inline-block; }

 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <header> <div id="nav"> <ul> <li> <a href=""> <h3> <?=$row[1]?> </h3> </a> </li> <li> <a href=""> <h3><span class="glyphicon glyphicon-log-out"></span> Log out</h3> </a> </li> </ul> </div> </header> <body> </body>

Answer 1

由于您已经在使用Bootstrap，因此无需添加外部CSS即可进行微不足道的调整

<div class="col-md-2 col-md-offset-5"></div>

因此，您应该将调整添加到<li>标记中

    <div id="nav"> 
<ul> 
<li  class="col-md-2 col-md-offset-5"><a href=""><h3 ><?=$row[1]?></h3></a></li> 
<li class= pull-right><a href=""><h3><span class="glyphicon glyphicon-log-out"></span> Log out</h3></a></li> 
</ul> 
</div>

抱歉，格式不好，请在移动设备上完成

Answer 2

有很多方法可以解决这个问题。 在保持样式的同时，您可以添加

li:first-of-type {
  width: 100%; 
}

li:last-of-type {
  position: absolute;
  top: 0;
  right: 0;
}

您可能需要在移动设备上进行调整。

需要帮助修复导航栏，特别是Inline-Block

问题描述

2 个解决方案

解决方案1
0 2018-02-14 01:18:27

解决方案2
0 2018-02-14 01:28:46

需要帮助修复导航栏，特别是Inline-Block

问题描述

2 个解决方案

解决方案1 0 2018-02-14 01:18:27

解决方案2 0 2018-02-14 01:28:46

解决方案1
0 2018-02-14 01:18:27

解决方案2
0 2018-02-14 01:28:46