Question

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

我希望第一个列表$row[1]放在中间，Logout列表项放在右上角。而且我知道有人会因为使用通用字符（*）而对我大喊大叫，但我的所有字体都是一样的，所以它并不重要。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

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

需要帮助修复导航栏，特别是内联阻止

2 个答案: