Question

我一直试图将这个下拉导航集中在一起，但我无法正确理解它。这里有没有人知道为什么我不能这样做？我觉得它与第一个li元素的浮动有关，但我不确定。

JSFiddle ：https://jsfiddle.net/21e7p8Lx/

＆＃13;

ul#dropdown {
            list-style: none;
        }

        ul#dropdown li {
            float: left;
            background: darkgrey;
        }

        ul#dropdown li a {
            display: inline-block;
            padding: 20px 40px;
            color: black;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 20px;
        }

        ul#dropdown li:hover {
            background: grey;
        }

        ul#dropdown > li:not(:last-child) {
            border-right: 1px solid white;
        }

        ul#dropdown li ul {
            list-style: none;
            display: none;
            position: absolute;
            margin-top: 0px;
        }

        ul#dropdown li:hover ul {
            display: block;
        }

        ul#dropdown li ul li {
            float: none;
            border: none;
            border-top: 1px solid white;
        }

＆＃13;

<nav>
        <ul id="dropdown">
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li>
                <a href="#">Test3</a>
                <ul>
                    <li><a href="#">DropdownTest1</a></li>
                    <li><a href="#">DropdownTest2</a></li>
                    <li><a href="#">DropdownTest3</a></li>
                </ul>
            </li>
            <li><a href="#">Test4</a></li>
            <li>
                <a href="#">Test5</a>
                <ul>
                    <li><a href="#">DropdownTest1</a></li>
                    <li><a href="#">DropdownTeasdadst2</a></li>
                    <li><a href="#">DropdownTest3</a></li>
                </ul>
            </li>
        </ul>
    </nav>

＆＃13;

Answer 1

添加此CSS：

ul#dropdown {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;        //cause #dropdown to "shrink-to-fit"
}

前三种风格基于一种流行的垂直居中方法，可在http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/找到。在这种情况下，我已经改变了，所以我们可以横向居中。

需要最后一种样式，因为默认情况下块元素占用100％，但内联块元素将缩小以适应其内容。

Updated Fiddle

为什么我不能将这个纯CSS3下拉导航集中在一起？

1 个答案: