Question

所以我目前正在建立自己的网站，但是当我将实际的ul集中在我的导航栏中时遇到了一些麻烦。导航栏已经居中并且很好，但我试图将实际的ul居中并仍然保持左对齐。我正在使用Brackets文本编辑器。任何帮助？

提前致谢并提供我的CSS代码：

＆＃13;

body {
  background-color: #333333;
  margin: 100 0;
}

.mainimg {
  border-style: solid;
  width: 80%;
  margin: 10 auto;
}

.mainimg img {}

.nav-bar {
  text-align: center;
  width: 85%;
  margin: 0 auto;
}

.nav-bar ul {
  width: 100%;
  list-style-type: none;
  margin: 0 auto;
  padding: 0 auto;
  overflow: hidden;
  background-color: #333333;
}

.nav-bar li {
  float: left;
  width: 10%;
}

.nav-bar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.nav-bar li a:hover {
  background-color: #111111;
}

＆＃13;

<html>

<head>
  <title>Satori</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="imageslider">
    <img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
    <img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
    <img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
  </div>
  <div class="nav-bar">
    <ul>
      <li><a href="">Station</a></li>
      <li><a href="">Search</a></li>
      <li><a href="">Shop</a></li>
      <li><a href="">Films</a></li>
      <li><a href="">Art</a></li>
      <li><a href="">Podcast</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Games</a></li>
      <li><a href="">Music</a></li>
    </ul>
  </div>
</body>

</html>

＆＃13;

Answer 1

更新下面的css部分

.nav-bar li {
 display:inline-flex; /* OR display:inline-block */
 /* float:left; */
/* width: 10%; */
}

＆＃13;

body {
  background-color: #333333;
  margin: 100 0;
}

.mainimg {
  border-style: solid;
  width: 80%;
  margin: 10 auto;
}

.mainimg img {}

.nav-bar {
  text-align: center;
  width: 85%;
  margin: 0 auto;
}

.nav-bar ul {
  width: 100%;
  list-style-type: none;
  margin: 0 auto;
  padding: 0 auto;
  overflow: hidden;
  background-color: #333333;
}

.nav-bar li {
 display:inline-flex; /* OR display:inline-block */
 /* float:left; */
/* width: 10%; */
}

.nav-bar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.nav-bar li a:hover {
  background-color: #111111;
}

＆＃13;

<div class="imageslider">
    <img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left">
    <img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw">
    <img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right">
  </div>
  <div class="nav-bar">
    <ul>
      <li><a href="">Station</a></li>
      <li><a href="">Search</a></li>
      <li><a href="">Shop</a></li>
      <li><a href="">Films</a></li>
      <li><a href="">Art</a></li>
      <li><a href="">Podcast</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Games</a></li>
      <li><a href="">Music</a></li>
    </ul>
  </div>

＆＃13;

如何在导航栏中居中无组织列表

1 个答案: