我如何拥有完全中心的导航栏具有相同的宽链接？ [英] How can I have perfectly centered navigation bar with equally wide links?

问题描述

所以我想在我的网站上有一个居中的导航菜单/栏，类似于 Ovh的网站。我把什么CSS（不包括颜色）。这是我的HTML：

 < div class =nav 
< div class =top_page> 
< h1 class =mainTitle> Exatreo< / h1> 
< p class =slogan>口号< / p> 
< br /> 
< / div> 
< div class =container> 
< ul class =center-links> 
< a href =class =content>首页< / a>< / li> 
< a href =/ aboutclass =content>关于< / a> 
< a href =/ projectsclass =content> Projects< / a> 
< a href =/ recruitclass =content> reaguting< / a> 
< a href =/ helpclass =content>帮助< / a> 
< / ul> 
< / div> 
< br /> 
< br /> 
< / div> 
  

$ b

谢谢！

解决方案

首先，您的HTML无效， ul 只能将 li 但是我们可以使用 nav 元素。

方法1：表格布局 / p>

  .center-links {display：table; table-layout：fixed; width：100％; text-align：center;}。center-links a {display：table-cell; border：1px solid gray;}  

 < div class = container> < nav class =center-links> < a href =class =content>首页< / a> < a href =/ aboutclass =content>关于< / a> < a href =/ projectsclass =content> Projects< / a> < a href =/ recruitclass =content> recouting< / a> < a href =/ helpclass =content>帮助< / a> < / nav>< / div>  

方法2：Flexbox

  .center-links {display：flex; text-align：center;}。center-links a {flex：1; border：1px solid gray;}  

 < div class = container> < nav class =center-links> < a href =class =content>首页< / a> < a href =/ aboutclass =content>关于< / a> < a href =/ projectsclass =content> Projects< / a> < a href =/ recruitclass =content> recouting< / a> < a href =/ helpclass =content>帮助< / a> < / nav>< / div>  

So I want to have a centered navigation menu/bar on my website, kind of like the one on Ovh's website. What CSS do I put (don't include colors). Here is my 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>

Thanks!

解决方案

Firstly, your HTML is invalid, ul can only have li as direct children...but we can use a nav element instead.

Method 1: Table Layout

.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>

Method 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>

这篇关于我如何拥有完全中心的导航栏具有相同的宽链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！