Question

我有自定义导航栏，没有任何引导程序或其他东西。

我尝试了一个标签，下拉是中间，一个标签是右侧。

但是右侧标签不在导航栏中。

我不明白为什么如果它在ul标签中它会离开导航栏。也许有人可以解释一下。

HTML code：

<div id="nav">
<div id="nav_wrapper">
    <ul>
      <div id="left">
        <li>
          <a href="#">item #1</a>
        </li>
      </div>
      <div id="mid">
        <li> <a href="#">dropdown #1</a>

            <ul>
                <li>
                  <a href="#">dropdown #1 item #1</a>
                </li>
                <li>
                  <a href="#">dropdown #1 item #2</a>
                </li>
                <li>
                  <a href="#">dropdown #1 item #3</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">dropdown #2</a>

            <ul>
                <li>
                  <a href="#">dropdown #2 item #1</a>
                </li>
                <li>
                  <a href="#">dropdown #2 item #2</a>
                </li>
                <li>
                  <a href="#">dropdown #2 item #3</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">dropdown #3</a>

            <ul>
                <li>
                  <a href="#">dropdown #3 item #1</a>
                </li>
                <li>
                  <a href="#">dropdown #3 item #2</a>
                </li>
                <li>
                  <a href="#">dropdown #3 item #3</a>
                </li>
            </ul>
        </li>
      </div>
      <div id="right">
        <li>
          <a href="#">item #2</a>
        </li>
      </div>
    </ul>
</div>
<!-- Nav wrapper end -->

样式代码：

    body {
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}
#nav {
background-color: #222;
}
#left{
float: left;
}

#mid{
margin-left: auto;
margin-right: auto;
text-align: center
}

#right{
float: right;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #333;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
    z-index: 1;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:hover {
    color: #699;
}

在这里添加了html和样式代码。

问题在右侧不在导航栏中。

我认为在div中存在问题。

Answer 1

请尝试

#nav_wrapper ul{
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display:flex;
}

现在您不必将float:left和float:right提供给#left和#right div;你右边的div将在右端对齐。

OR

将以下代码添加到现有样式中，以便在右端对齐第三个项目。

#nav{
 background-color: #222;
 overflow:hidden;
}

#mid{
  float:left;
}

自定义导航栏样式无法正常工作

1 个答案: