我如何才能使導航欄居中且鏈接同樣寬？

Question

所以我想在我的網站上有一個居中的導航菜單/欄，有點像Ovh網站上的導航菜單/欄。 我要放什么CSS（不包括顏色）。 這是我的HTML：

<div class = "nav">
        <div class = "top_page">
            <h1 class = "mainTitle">Exatreo</h1>
            <p class = "slogan">Slogan</p>
            <br/>
        </div>
        <div class = "container">
            <ul class="center-links">
                <a href="" class = "content" >Home</a></li>
                <a href="/about" class = "content" >About</a>
                <a href="/projects" class = "content" >Projects</a>
                <a href="/recruit" class = "content" >recruting</a>
                <a href="/help" class = "content" >Help</a>
            </ul>
        </div>
        <br />
        <br />
    </div>

謝謝！

Answer 1

首先，您的HTML無效， ul只能將li用作直接子級...但是我們可以改用nav元素。

方法1：表布局

 .center-links { display: table; table-layout: fixed; width: 100%; text-align: center; } .center-links a { display: table-cell; border: 1px solid grey; } 

 <div class="container"> <nav class="center-links"> <a href="" class="content">Home</a> <a href="/about" class="content">About</a> <a href="/projects" class="content">Projects</a> <a href="/recruit" class="content">recruting</a> <a href="/help" class="content">Help</a> </nav> </div> 

方法2：Flexbox

 .center-links { display: flex; text-align: center; } .center-links a { flex: 1; border: 1px solid grey; } 

 <div class="container"> <nav class="center-links"> <a href="" class="content">Home</a> <a href="/about" class="content">About</a> <a href="/projects" class="content">Projects</a> <a href="/recruit" class="content">recruting</a> <a href="/help" class="content">Help</a> </nav> </div>