Question

我在使用CSS3在我的网站上列出列表项时遇到了一些问题，我知道为什么我不能将这些项目放在中心位置？

以下是我的问题的屏幕截图： https://gyazo.com/4b68df7e38e71ae320fdb6cb1c0c4e87

下面是我为导航栏编写的CSS3和HTML代码：

＆＃13;

.navigation ul {
  background-color: #A1C9EC;
  border-style: solid;
  border-color: #9FABB6;
  border-width: 1px;
}

.navigation ul li {
  display: inline-block;
  border-style: solid;
  border-color: #9FABB6;
  border-width: 1px;
  border-radius: 5px;
  padding-left: 1em;
  padding-right: 1em;
  background-color: #ffffff;
  border-top-color: #ffffff;
  margin: 1em;
}

＆＃13;

<!--Wrapper to adjust width of main body on desktop site.-->
<div class="wrapper">
  <h1>Shane's Portfolio</h1>
  <!--Navigation Bar (TOP)-->
  <div class="navigation">
    <nav>
      <ul>
        <li>Home</li>
        <li>My Work</li>
        <li>Qualifications</li>
        <li>About Me</li>
        <li>Contact Me</li>
      </ul>
    </nav>
  </div>

＆＃13;

Answer 1

text-align: center;

包装div上的

应该可以解决问题。如果你可以分享html代码那么很容易给出答案

Answer 2

您需要添加

text-align: center;
padding-left: 0;

到.navigation ul { <ul>有默认填充，这就是您需要将其设置为0的原因。

（此外，如果您点击＆＃34;运行代码已剪切＆＃34;）我已缩短导航列表和单词以获得正确的输出。

＆＃13;

.navigation ul{
    background-color: #A1C9EC;
    border-style: solid;
    border-color: #9FABB6;
    border-width: 1px;
    text-align: center;
    padding-left: 0;
}

.navigation ul li 
{
    display: inline-block;
    border-style: solid;
    border-color: #9FABB6;
    border-width: 1px;
    border-radius: 5px;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #ffffff;
    border-top-color: #ffffff;
    margin: 1em;
}

＆＃13;

<div class="wrapper">
  <h1>Shane's Portfolio</h1>
  <!--Navigation Bar (TOP)-->
  <div class="navigation">
      <nav>
          <ul>
              <li>Home</li>
              <li>My</li>
              <li>Qua</li>
          </ul>
      </nav>
  </div>
</div>

＆＃13;

如何在导航栏中居中列出项目

2 个答案: