html - Navtab 的问题

Question

我从 freecodecamp 学习 HTML 和 CSS。对于所有 Bootstrap 代码，我有点困惑。

这是我的代码:

h1 {
  text-align: center;
  letter-spacing: 5px;
  color: coral;
  font-family: verdana;
}
ul {                
  height: 20%;
  background-color: darkgrey;
  list-style-type: none;
  display: solid;                                              
}
li {   
  display: inline-block;
  padding: 0% 5% 0% 5%;
  text-align:                    
}
#first {
  margin: 0% 0% 0% 30%;
}
li:hover {           
  background-color: bisque;
  text-decoration: none;
}

<h1> Test Website </h1>
<div class="container-fluid">
  <div class="menu">
    <div id="tope"></div>
    <ul id="navbar">                   
      <li id="first"><a href="www.a.com"> Us </a></li>
      <li><a href="www.b.com"> Work </a></li>
      <li id="last"><a href="www.c.com"> Vids and photos </a></li>   
    </ul>    
  </div>
</div>

演示:CodePen .

我正在努力解决的问题是我的导航选项卡(实际上，所有 <li> 元素)不遵循主标题 <h1>调整屏幕大小时的元素。

我想制作某种网格系统，我的 <li>以 <h1> 为中心，但没有 Bootstrap 。那可能吗？如果是，怎么办？

Answer 1

您的列表在调整大小时未正确对齐的原因是您向 #first 添加了 margin-right 值。这使一切都失去了对齐。但是您非常接近实现您想要的结果!

你只需要做一些更正:

http://www.bootply.com/YHHS5on2Ej

ul {                
    background-color: darkgrey;
    list-style-type: none;
    width: 100%;
    text-align: center;
}

li {   
    display: inline-block;
    padding: 0% 5% 0% 5%;
}

去掉所有 #first 的 CSS 并注意 display:solid 不是有效的 CSS