Question

我在导航下有3个下拉菜单，我想将它们左，中，右对齐。左右对齐使用float工作，但我很难将下拉菜单对齐到中间。请参阅css选择器 https://jsfiddle.net/xv51vkc7/的.inline-menu.middle-menu。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Title</title>
    <link rel="stylesheet" type="text/css" href="css/theme_1.css">
</head>
<body>
        <nav>
            <ul class="inline-menu left-menu">
                <li><a href="">Left-A</a>
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                    </ul>
                </li>
                <li><a href="">Left-B</a>
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="inline-menu middle-menu">
                <li><a href="">Middle-A</a>
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                    </ul>
                </li>
                <li><a href="">Middle-B</a>
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="inline-menu right-menu">
                <li><a href="">Right-A</a>
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                    </ul>
                </li>
                <li><a href="">Right-B</a>
                    <ul>
                        <li><a href="">1</a></li>
                        <li><a href="">2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
</body>
</html>


body{
    background-color: #eee;
    padding: 0;
}

.inline-menu,
.inline-menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.inline-menu > li{
    display: inline-block;
    padding-right: 25px;
    background-color: yellow;
    position: relative;
}

.inline-menu a{
    text-decoration: none;
}

.inline-menu > li > ul{
    display: none;
    position: absolute;
    background-color: green;
}

.inline-menu > li:hover > ul{
    display: block;
    width: 100%;        /* same width as parent */
}

.inline-menu.left-menu{
    float: left;
}

.inline-menu.right-menu{
    float: right;
}

.inline-menu.middle-menu{

}

Answer 1

Flexbox可以做到这一点：

＆＃13;

body {
  background-color: #eee;
  padding: 0;
}
nav {
  display: flex;
  justify-content: space-between;
}
.inline-menu,
.inline-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.inline-menu > li {
  display: inline-block;
  padding-right: 25px;
  background-color: yellow;
  position: relative;
}
.inline-menu a {
  text-decoration: none;
}
.inline-menu > li > ul {
  display: none;
  position: absolute;
  background-color: green;
}
.inline-menu > li:hover > ul {
  display: block;
  width: 100%;
  /* same width as parent */
}
.inline-menu.left-menu {
  float: left;
}
.inline-menu.right-menu {
  float: right;
}
.inline-menu.middle-menu {
  float: left;
}

＆＃13;

<nav>
  <ul class="inline-menu left-menu">
    <li><a href="">Left-A</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
    <li><a href="">Left-B</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
  </ul>

  <ul class="inline-menu middle-menu">
    <li><a href="">Middle-A</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
    <li><a href="">Middle-B</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
  </ul>

  <ul class="inline-menu right-menu">
    <li><a href="">Right-A</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
    <li><a href="">Right-B</a>
      <ul>
        <li><a href="">1</a>
        </li>
        <li><a href="">2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

CSS - 将下拉菜单对齐左侧，中间和右侧

1 个答案: