Question

所以我正在建立一个顶级菜单的网站，但我遇到了一个问题。基本上我想让我的菜单居中，但现在它与左边对齐。菜单也有背景颜色，必须扩大整个宽度。我在这里尝试了答案：How do I center the navigation menu?。但没有成功。

我的CSS / HTML代码是：

body {
  font-family: FuturaLight;
  background: white;
  color: #333;
  align-content: top;
  margin: 0;
  margin-bottom: 5em;
  padding: 0;
}
.margin {
  margin-left: 300px;
  margin-right: 300px;
}
ul {
  font-family: Futura;
  font-size: 25px;
  list-style-type: none;
  position: fixed;
  top: 61px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
  border-right: 1px solid yellowgreen;
  border-top: 1px solid yellowgreen;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #333;
}
.active {
  background-color: white;
  color: green
}
.spacer {
  width: 100%;
  height: 95px;
}

<!DOCTYPE HTML>
<HTML>

<HEAD>
  <TITLE>Scouts Permeke</TITLE>
  <link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>

<BODY>
  <H1>Scouts Permeke</H1>

  <ul>
    <li><a class="active" href="scouts_permeke_site.html">Home</a>
    </li>
    <li><a href="scouts_news.html">Nieuws</a>
    </li>
    <li><a href="scouts_contact.html">Contact</a>
    </li>
    <li><a href="scouts_over.html">Over</a>
    </li>
    <li><a href="scouts_fotos.html">Foto's</a>
    </li>
    <li><a href="scouts_activiteiten.html">Activiteiten</a>
    </li>
    <li><a href="scouts_papierwerk.html">Papierwerk</a>
    </li>
    <li><a href="scouts_afspraken.html">Afspraken</a>
    </li>
    <li><a href="scouts_uniform.html">Uniform</a>
    </li>
    <li><a href="scouts_technieken.html">Technieken</a>
    </li>
    <li><a href="scouts_jaarthema.html">Jaarthema</a>
    </li>
    <li><a href="scouts_rituelen.html">Rituelen</a>
    </li>
    <li><a href="scouts_verhuur.html">Verhuur</a>
    </li>
    <li><a href="scouts_inschrijven.html">Inschrijvingen</a>
    </li>
  </ul>

  <div class="spacer">
    &nbsp;
  </div>

  <img src="groepsfoto.jpg" width="100%" " >

        <div style="font-family: Futura ">
		    <H2>Welkom op onze vernieuwde site!</H2>
            <H2>Kijk gerust even rond.</H2>
        </div>
    </BODY>
</HTML>

非常感谢提前。

Answer 1

在样式表中添加到ul：

text-align: center;

并替换为li

float: left;

用这个

display: inline-block;

那可以做到。

希望这有帮助。

Answer 2

您是否考虑过flexbox，因为它可以根据屏幕尺寸进行操作，您可以将其设置为中心对齐。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请注意，它不适用于旧版本的ie

＆＃13;

    BODY {
    font-family: FuturaLight;
    background: white; color: #333;
    align-content: top;
    margin: 0;
    margin-bottom: 5em; 
    padding: 0;

    }
    .margin {
    margin-left: 300px;
    margin-right: 300px;
    }

    ul {
    font-family: Futura;
    font-size: 25px;
    list-style-type: none;
    position: fixed;
    top: 61px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content:center;
    flex-wrap: wrap 
    }

    li {
    float: left;
    border-right:1px solid yellowgreen;
    border-top:1px solid yellowgreen;

    }

    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    li a:hover:not(.active) {
    background-color: #333;
    }

    .active {
    background-color: white;
    color: green
    }

    .spacer
    {
    width: 100%;
    height: 95px;
    }

＆＃13;

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
        <TITLE>Scouts Permeke</TITLE>
        <link rel="stylesheet" type="text/css" href="siteStyle.css">
    </HEAD>
	<BODY>
		<H1>Scouts Permeke</H1>

        <ul>
            <li><a class="active" href="scouts_permeke_site.html">Home</a></li>
            <li><a href="scouts_news.html">Nieuws</a></li>
            <li><a href="scouts_contact.html">Contact</a></li>
            <li><a href="scouts_over.html">Over</a></li>
            <li><a href="scouts_fotos.html">Foto's</a></li>
            <li><a href="scouts_activiteiten.html">Activiteiten</a></li>
            <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
            <li><a href="scouts_afspraken.html">Afspraken</a></li>
            <li><a href="scouts_uniform.html">Uniform</a></li>
            <li><a href="scouts_technieken.html">Technieken</a></li>
            <li><a href="scouts_jaarthema.html">Jaarthema</a></li>
            <li><a href="scouts_rituelen.html">Rituelen</a></li>
            <li><a href="scouts_verhuur.html">Verhuur</a></li>
            <li><a href="scouts_inschrijven.html">Inschrijvingen</a></li>
        </ul>

        <div class="spacer">
            &nbsp;
        </div>

        <img src="groepsfoto.jpg" width="100%"" >

        <div style="font-family: Futura">
		    <H2>Welkom op onze vernieuwde site!</H2>
            <H2>Kijk gerust even rond.</H2>
        </div>
    </BODY>
</HTML>

＆＃13;

我不能把我的菜单放在HTML上

2 个答案: