Question

我需要将这些链接置于中心，同时离开桑托斯消防局 BTW唯一的原因是桑托斯消防局有两个不同的标签是避免悬停动画。

＆＃13;

ul.nav{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 3.3em;
}
ul.nav li {
    float:left;
}
ul.nav li a{
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
}
ul.nav li .navlogo{
    overflow: hidden;
    background-color: #333;
    height: 3.3em;
}
ul.nav li a.navlogo{
    display: inline-block;
    padding-top: 10px;
    margin-left: 10px;
    font-size: 150%;
    z-index: -1;
}

＆＃13;

<nav class="navbar">
        <ul class="nav">
            <li id="logo"><a class="navlogo">Santos Fire Department</a></li>
            <li id="nav"><a href="ts3server://ts.santosrp.com/">TeamSpeak (Temp Server)</a></li>
            <li id="nav"><a href="steam://connect/158.69.123.91:27015">US Server</a></li>
            <li id="nav"><a href="steam://connect/158.69.123.91:27015">EU Server</a></li>
            <li id="nav"><a href="https://santosrp.com/">SantosRP</a></li>
        </ul>
    </nav>

＆＃13;

Answer 1

首先，您应该删除多个ID，例如id="nav"这对样式很重要。

现在父母需要text-align: center;，而#logo现在可以float: left;。否则，永远不要避免使用flexbox，但请记住浏览器支持Cascade

Answer 2

桑托斯消防局处于原始位置，导航栏居中：）

.navbar {
  background-color: #333;
}
.nav {
  display: table;
  margin: 0 auto;
}
ul.nav li {
  display: inline-block;
}
ul.nav li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  text-align: center;
}
.navlogo a {
  color: white;
  font-size: 150%;
  margin: 8px;
  position:absolute;
}

<nav class="navbar">
  <span class="navlogo"><a>Santos Fire Department</a></span>
  <ul class="nav">
    <li id="nav1"><a href="ts3server://ts.santosrp.com/">TeamSpeak (Temp Server)</a>
    </li>
    <li id="nav2"><a href="steam://connect/158.69.123.91:27015">US Server</a>
    </li>
    <li id="nav3"><a href="steam://connect/158.69.123.91:27015">EU Server</a>
    </li>
    <li id="nav4"><a href="https://santosrp.com/">SantosRP</a>
    </li>
  </ul>
</nav>

<强>更新

的位置是：绝对的;在.navlogo上一个类，可能不是最好的方法，但会给你想要的结果。

在导航栏上居中文本

2 个答案: