html - 在 DIV 中对齐水平 UL 菜单

Question

努力让我的水平 UL 菜单在父 DIV 中居中。

相当烦人，因为它实际上超出了大约 10-20 像素。

任何帮助都会很棒，谢谢!

https://jsfiddle.net/xd5cxngt/

HTML

<div id="navbar">
        <ul id="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="The-Isle-of-Wight.html">The Isle of Wight</a></li>
            <li><a href="Your Stay">Your Stay</a></li>
            <li><a href="Booking">Booking</a></li>
            <li><a href="Contact Us">Contact Us</a></li>
        </ul>
    </div>

CSS

#navbar {
    background-color: #dddddd;
    text-align: center;
    height: 28px;
    max-width: 100%;
    min-width: 960px;
    margin: 0 auto;
}
ul#menu li {
    display: inline-block;
}
ul#menu li a {
    background-color: #4d4d4d;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
}

Answer 1

只需删除导航栏 div 中的行 min-width: 960px; 即可。 这是一个工作示例:https://jsfiddle.net/84etsxzn/