Html 如何创建一个像苹果一样的导航条？

我怎样才能像苹果那样创建导航栏？我已经尝试过了，以下是我到目前为止所做的：

如您所见，按钮的间距有点过大。为此，我使用了

justify content:space around

。我曾试图使间距与苹果网站相同，但没有成功，我想知道是否有人可以帮助我。这是苹果网站的导航栏，仅供参考

以下是我尝试过的：

.wrapper{
高度：100vh；
}
导航{
高度：44px；
溢出：滚动；
背景：#323232；
}
导航ul{
显示器：flex；
高度：44px；
证明内容：周围的空间；
对齐项目：居中；
填充：0；
保证金：0；
列表样式类型：无；
}
nav li{}
导航a{
显示：块；
颜色：白色；
字体大小：15px；
字体重量：较轻；
文字装饰：无；
过渡：0.3s；
}
导航a：悬停{
颜色：#B8B8B8；
}

有几件事：

苹果公司在导航上应用了一个“最大宽度”的“容器”。这已添加到下面

我调整了一些款式以改善外观。下面CSS中的注释

如果你仔细看，苹果的链接之间有“死空间”。也存在于此标记/布局中

如果这不能解决您的问题，那么请告知您所说的“间距已关闭”是什么意思-请具体明确，否则无法提供帮助……）

正文{
保证金：0；
}
.包装纸{
高度：100vh；
}
导航{
高度：44px；
背景：#323232；
文本对齐：居中；/*使UL在导航中居中*/
}
导航ul{
显示器：flex；
最大宽度：1200px；/*更改为所需宽度*/
/*从此处删除高度，应用于图元*/
证明内容：周围的空间；
对齐项目：居中；
填充：0；
边距：0自动；/*0自动允许其在导航中自动居中*/
列表样式类型：无；
}
nav li{}
导航a{
显示：内联块；
高度：44px；/*在此处应用高度，将li/ul推至正确高度*/
线高度：44px；/*以获得垂直居中*/
颜色：白色；
字体大小：15px；
字号：100；
文字装饰：无；
过渡：0.3s；
}
导航a：悬停{
颜色：#B8B8B8；
}

如果要在每个按钮和按钮之间留出空间，则必须使用边距命令在所有按钮之间平均留出间隔和距离。将

margin

放置在要使其与其余按钮之间的距离相等的按钮之前，然后在设置每个按钮之间距离的样式中定义它，并使用

margin

命令，选择要设置与另一个按钮之间距离的方向（如果左侧或右侧），例如：

margin-right: 20px;

---

将按钮放置在要使其与其余按钮之间的距离相等的按钮之前，然后在“设置每个按钮之间的距离”的列表中定义它，使用命令并选择要设置与另一个按钮之间距离的方向（如果是左或右），例如您需要向

ul

添加一个额外的包装，比如说“appleNav”

将以下属性添加到

appleNav

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

.wrapper{
高度：100vh；
}
身体{
保证金：0；
}
导航{
高度：44px；
溢出：滚动；
背景：#323232；
}
导航ul{
显示器：flex；
高度：44px；
证明内容：周围的空间；
对齐项目：居中；
填充：0；
保证金：0自动；
列表样式类型：无；
}
nav li{}
导航a{
显示：块；
颜色：白色；
字体大小：15px；
字体重量：较轻；
文字装饰：无；
过渡：0.3s；
}
导航a：悬停{
颜色：#B8B8B8；
}
阿普莱纳夫先生{
最大宽度：980px；
保证金：0自动；
}

这是他们在代码笔中的代码：

<nav id="ac-globalnav" class="js no-touch" role="navigation" aria-label="Global" data-hires="false" data-analytics-region="global nav" lang="en-US" dir="ltr" data-store-locale="us" data-store-api="/[storefront]/shop/bag/status" data-search-locale="en_US" data-search-api="/search-services/suggestions/">
<div class="ac-gn-content">
    <ul class="ac-gn-header">
        <li class="ac-gn-item ac-gn-menuicon">
            <label class="ac-gn-menuicon-label" for="ac-gn-menustate" aria-hidden="true">
                <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-top">
                    <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span>
                </span>
                <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom">
                    <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span>
                </span>
            </label>
            <a href="#ac-gn-menustate" class="ac-gn-menuanchor ac-gn-menuanchor-open" id="ac-gn-menuanchor-open">
                <span class="ac-gn-menuanchor-label">Open Menu</span>
            </a>
            <a href="#" class="ac-gn-menuanchor ac-gn-menuanchor-close" id="ac-gn-menuanchor-close">
                <span class="ac-gn-menuanchor-label">Close Menu</span>
            </a>
        </li>
        <li class="ac-gn-item ac-gn-apple">
            <a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus-small">
                <span class="ac-gn-link-text">Apple</span>
            </a>
        </li>
        <li class="ac-gn-item ac-gn-bag ac-gn-bag-small" id="ac-gn-bag-small">
            <a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" data-analytics-title="bag" data-analytics-click="bag" aria-label="Shopping Bag" data-string-badge="Shopping Bag with Items" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="ac-gn-bagview-content">
                <span class="ac-gn-link-text">Shopping Bag</span>
                <span class="ac-gn-bag-badge"></span>
            </a>
            <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
        </li>
    </ul>
    <div class="ac-gn-search-placeholder-container" role="search">
        <div class="ac-gn-search ac-gn-search-small">
            <a id="ac-gn-link-search-small" class="ac-gn-link" href="/us/search" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link="" aria-label="Search apple.com" role="button" aria-haspopup="true">
                <div class="ac-gn-search-placeholder-bar">
                    <div class="ac-gn-search-placeholder-input">
                        <div class="ac-gn-search-placeholder-input-text" aria-hidden="true">
                            <div class="ac-gn-link-search ac-gn-search-placeholder-input-icon"></div>
                            <span class="ac-gn-search-placeholder">Search apple.com</span>
                        </div>
                    </div>
                    <div class="ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close">
                        <span class="ac-gn-searchview-close-cancel" aria-hidden="true">Cancel</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <ul class="ac-gn-list">
        <li class="ac-gn-item ac-gn-apple">
            <a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
                    <span class="ac-gn-link-text">Apple</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
            <a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
                    <span class="ac-gn-link-text">Mac</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
            <a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
                    <span class="ac-gn-link-text">iPad</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-iphone">
            <a class="ac-gn-link ac-gn-link-iphone" href="/iphone/" data-analytics-title="iphone">
                    <span class="ac-gn-link-text">iPhone</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-watch">
            <a class="ac-gn-link ac-gn-link-watch" href="/watch/" data-analytics-title="watch">
                    <span class="ac-gn-link-text">Watch</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-tv">
            <a class="ac-gn-link ac-gn-link-tv" href="/tv/" data-analytics-title="tv">
                    <span class="ac-gn-link-text">TV</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-music">
            <a class="ac-gn-link ac-gn-link-music" href="/music/" data-analytics-title="music">
                    <span class="ac-gn-link-text">Music</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-support">
            <a class="ac-gn-link ac-gn-link-support" href="https://support.apple.com" data-analytics-title="support">
                    <span class="ac-gn-link-text">Support</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search">
            <a id="ac-gn-link-search" class="ac-gn-link ac-gn-link-search" href="/us/search" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link="" aria-label="Search apple.com" role="button" aria-haspopup="true"></a>
        </li>
        <li class="ac-gn-item ac-gn-bag" id="ac-gn-bag">
            <a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" data-analytics-title="bag" data-analytics-click="bag" aria-label="Shopping Bag" data-string-badge="Shopping Bag with Items" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="ac-gn-bagview-content">
                    <span class="ac-gn-link-text">Shopping Bag</span>
                    <span class="ac-gn-bag-badge" aria-hidden="true"></span>
                </a>
            <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
        </li>
    </ul>
    <aside id="ac-gn-searchview" class="ac-gn-searchview" role="search" data-analytics-region="search">
        <div class="ac-gn-searchview-content">
            <div class="ac-gn-searchview-bar">
                <div class="ac-gn-searchview-bar-wrapper">
                    <form id="ac-gn-searchform" class="ac-gn-searchform" action="/us/search" method="get">
                        <div class="ac-gn-searchform-wrapper">
                            <input id="ac-gn-searchform-input" class="ac-gn-searchform-input" type="text" aria-label="Search apple.com" placeholder="Search apple.com" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
                            <input id="ac-gn-searchform-src" type="hidden" name="src" value="globalnav">
                            <button id="ac-gn-searchform-submit" class="ac-gn-searchform-submit" type="submit" disabled="" aria-label="Submit Search"></button>
                            <button id="ac-gn-searchform-reset" class="ac-gn-searchform-reset" type="reset" disabled="" aria-label="Clear Search">
                                    <span class="ac-gn-searchform-reset-background"></span>
                                </button>
                        </div>
                    </form>
                    <button id="ac-gn-searchview-close-small" class="ac-gn-searchview-close ac-gn-searchview-close-small" aria-label="Cancel Search">
                            <span class="ac-gn-searchview-close-cancel" aria-hidden="true">
                                Cancel
                            </span>
                        </button>
                </div>
            </div>
            <aside id="ac-gn-searchresults" class="ac-gn-searchresults" data-string-quicklinks="Quick Links" data-string-suggestions="Suggested Searches" data-string-noresults=""> <section class="ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks" data-analytics-region="defaultlinks search">
    <div class="ac-gn-searchresults-section-wrapper">
        <h3 class="ac-gn-searchresults-header ac-gn-searchresults-animated">Quick Links</h3>
        <ul class="ac-gn-searchresults-list">
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/retail/" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="0" data-label="Find a Store" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Find a Store</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/us/shop/goto/accessories/apple_accessories" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="1" data-label="Accessories" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Accessories</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/ipod/" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="2" data-label="iPod" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">iPod</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/ios/" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="3" data-label="iOS" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">iOS</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/us/shop/goto/giftcards" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="4" data-label="Gift Cards" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Gift Cards</a>
            </li>
        </ul>
    </div>
</section>