Question

我是新来的，所以这是我的第一个问题。可能有些愚蠢，但我无法解决此问题。我创建了一个导航栏，但它根本没有居中：

因此，正如您所看到的，在它上面写着“画廊”的地方，显然它不在导航栏的中央。这是我的代码以及此导航栏的CSS。先感谢您！：D

    <ul class="nav">
        <li><a class="link" href="/">concerts</a></li>

        <li><a class="link" href="/about/">discografia</a></li>

        <li><a class="link" href="/work/">galeria</a></li>

        <li><a class="link" href="/clients/">botiga</a></li>

        <li><a class="link" href="/contact/">contacte</a></li>
    </ul>

这是我的导航栏的CSS样式表：

.nav{
list-style:none;
margin:10px;
padding:150px;
text-align:center;}
.nav li{
display:inline-block;}
.nav a{
text-decoration: none;
color: #b8d2db;
color: #fff;
width: 150px;
display: inline-block;
padding: 15px;
font-size: 30px;
transition: 0.4s;
font-family: 'Montserrat Alternates', sans-serif;}
.link:hover {
color: #fcff90;}

Answer 1

它居中，只是看起来不太像，因为单词的长度是可变的，并且您在视觉上没有边界标识。

演示：

.nav {
  list-style: none;
  margin: 10px;
  padding: 150px;
  text-align: center;
}

.nav li {
  display: inline-block;
  border: 1px solid white;
}

.nav a {
  text-decoration: none;
  color: #b8d2db;
  color: #fff;
  width: 150px;
  display: inline-block;
  padding: 15px;
  font-size: 30px;
  transition: 0.4s;
  font-family: 'Montserrat Alternates', sans-serif;
}

.link:hover {
  color: #fcff90;
}

body {
  background-color: black;
}

<ul class="nav">
  <li><a class="link" href="/">concerts</a></li>

  <li><a class="link" href="/about/">discografia</a></li>

  <li><a class="link" href="/work/">galeria</a></li>

  <li><a class="link" href="/clients/">botiga</a></li>

  <li><a class="link" href="/contact/">contacte</a></li>
</ul>

一种解决方法是删除在width上设置的显式<a>

.nav {
  list-style: none;
  margin: 10px;
  padding: 150px;
  text-align: center;
}

.nav li {
  display: inline-block;
}

.nav a {
  text-decoration: none;
  color: #b8d2db;
  color: #fff;
  display: inline-block;
  padding: 15px;
  font-size: 30px;
  transition: 0.4s;
  font-family: 'Montserrat Alternates', sans-serif;
}

.link:hover {
  color: #fcff90;
}

body {
  background-color: black;
}

<ul class="nav">
  <li><a class="link" href="/">concerts</a></li>

  <li><a class="link" href="/about/">discografia</a></li>

  <li><a class="link" href="/work/">galeria</a></li>

  <li><a class="link" href="/clients/">botiga</a></li>

  <li><a class="link" href="/contact/">contacte</a></li>
</ul>

我的酒吧根本没有居中，如何解决这个问题？

1 个答案: