如何阻止div移动其他div

Question

我需要文本桑托斯消防局说出它在哪里，但有美国服务器分机。居中。有没有办法让div不相互碰撞？我尝试了绝对位置，但它只是将文本移动到其他按钮中。

＆＃13;

＆＃13;

    li a:hover.nav {
      background-color: #111;
    }

    .navlogo {
      display: block;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      float: left;
      height: 3.3em;
      display: inline-block;
      position:
    }

    li a.navlogo {
      display: block;
      color: white;
      text-align: center;
      padding-top: 10px;
      margin-left: 10px;
      font-size: 150%;
      text-decoration: none;
      z-index: -1;
    }

    ul.nav {
      display: block;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      text-align: center;
      height: 3.3em;

    }

    li a.nav {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

ul和li的类名称不相同。请检查此代码

＆＃13;

＆＃13;

li a:hover.nav {
    background-color: #111;
}
.navlogo{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float:left;
    height: 3.3em;
    display:inline-block;
    position: 
}

li a.navlogo{
    display: block;
    color: white;
    text-align: center;
    padding-top: 10px;
    margin-left: 10px;
    font-size: 150%;
    text-decoration: none;
    z-index: -1;
}

ul.nav{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
    height: 3.3em;
}

li a.nav{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
   .nav li/*for display in one line*/
{
  float: left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;