html - 如何阻止div移动其他div

标签 html css

我需要文本Santos Fire Department来说明它在哪里,但是要使用US Server ext。居中。有什么办法可以使div彼此不冲突?我尝试使用绝对位置,但是它只是将文本移到其他按钮中。



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

最佳答案

ulli的类名不同。请检查此代码



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

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

关于html - 如何阻止div移动其他div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37318357/

相关文章:

javascript - 拉伸(stretch)图像以适合多边形 html5 Canvas

css - 部分页面无法正确呈现CSS类

javascript - 找不到干扰我的布局的CSS元素

html - 向网站添加自定义字体 (HTML/CSS)

html - 我的网站如何能够用于移动设备

html - 如何调整 anchor 标记内的图像,使其不超出 anchor 标记的内容区域

javascript - 是否可以通过jQuery中的索引号获取父元素?或者还有其他方法吗?

html - 使用固定导航栏时更正页面导航位置

javascript - 隐藏基于另一个div显示的div

javascript - 视口(viewport)高度和 .css()